Merge branch '1.4.0'
This commit is contained in:
Aditya
@@ -3515,7 +3515,7 @@ class AppBase:
|
||||
timeout = 30
|
||||
|
||||
# Check if current app is Shuffle Tools, then set to 55 due to certain actions being slow (ioc parser..)
|
||||
#uu In general, this should be disabled for onprem
|
||||
# In general, this should be disabled for onprem
|
||||
if self.action["app_name"].lower() == "shuffle tools":
|
||||
timeout = 55
|
||||
|
||||
|
||||
@@ -18,8 +18,8 @@ require (
|
||||
github.com/gorilla/mux v1.8.0
|
||||
github.com/h2non/filetype v1.1.3
|
||||
github.com/satori/go.uuid v1.2.0
|
||||
github.com/shuffle/shuffle-shared v0.4.66
|
||||
golang.org/x/crypto v0.14.0
|
||||
github.com/shuffle/shuffle-shared v0.4.79
|
||||
golang.org/x/crypto v0.9.0
|
||||
google.golang.org/api v0.125.0
|
||||
google.golang.org/grpc v1.55.0
|
||||
gopkg.in/src-d/go-git.v4 v4.13.1
|
||||
|
||||
@@ -1049,15 +1049,25 @@ func handleExecution(id string, workflow shuffle.Workflow, request *http.Request
|
||||
|
||||
workflowExecution, execInfo, _, err := shuffle.PrepareWorkflowExecution(ctx, workflow, request, 10)
|
||||
if err != nil {
|
||||
err = shuffle.SetWorkflowExecution(ctx, workflowExecution, true)
|
||||
if err != nil {
|
||||
log.Printf("[ERROR] Failed setting workflow execution during init (2): %s", err)
|
||||
}
|
||||
|
||||
if strings.Contains(fmt.Sprintf("%s", err), "User Input") {
|
||||
// Special for user input callbacks
|
||||
return workflowExecution, fmt.Sprintf("%s", err), nil
|
||||
} else {
|
||||
log.Printf("[WARNING] Failed in prepareExecution: %s", err)
|
||||
log.Printf("[ERROR] Failed in prepareExecution: %s", err)
|
||||
return shuffle.WorkflowExecution{}, fmt.Sprintf("Failed starting workflow: %s", err), err
|
||||
}
|
||||
}
|
||||
|
||||
err = shuffle.SetWorkflowExecution(ctx, workflowExecution, true)
|
||||
if err != nil {
|
||||
log.Printf("[ERROR] Failed setting workflow execution during init (2): %s", err)
|
||||
}
|
||||
|
||||
err = imageCheckBuilder(execInfo.ImageNames)
|
||||
if err != nil {
|
||||
log.Printf("[ERROR] Failed building the required images from %#v: %s", execInfo.ImageNames, err)
|
||||
@@ -1643,7 +1653,6 @@ func handleExecution(id string, workflow shuffle.Workflow, request *http.Request
|
||||
return shuffle.WorkflowExecution{}, "Failed building missing Docker images", err
|
||||
}
|
||||
|
||||
//Org []Org `json:"org,omitempty" datastore:"org"`
|
||||
err = shuffle.SetWorkflowExecution(ctx, workflowExecution, true)
|
||||
if err != nil {
|
||||
log.Printf("[WARNING] Error saving workflow execution for updates %s", err)
|
||||
|
||||
@@ -60,6 +60,7 @@
|
||||
"react-driftjs": "^1.2.2",
|
||||
"react-dropzone": "^14.2.3",
|
||||
"react-ga4": "^2.0.0",
|
||||
"react-hotkeys": "^2.0.0",
|
||||
"react-instantsearch-dom": "^6.28.0",
|
||||
"react-json-pretty": "^2.2.0",
|
||||
"react-json-view": "^1.21.3",
|
||||
|
||||
@@ -8,6 +8,7 @@ import Workflows from "./views/Workflows";
|
||||
import GettingStarted from "./views/GettingStarted";
|
||||
import AngularWorkflow from "./views/AngularWorkflow.jsx";
|
||||
|
||||
//import Header from "./components/NewHeader.jsx";
|
||||
import Header from "./components/Header.jsx";
|
||||
import theme from "./theme";
|
||||
import Apps from "./views/Apps";
|
||||
@@ -38,6 +39,7 @@ import ScrollToTop from "./components/ScrollToTop";
|
||||
import AlertTemplate from "./components/AlertTemplate";
|
||||
import { useAlert, positions, Provider } from "react-alert";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import RuntimeDebugger from "./components/RuntimeDebugger.jsx"
|
||||
|
||||
import { ToastContainer, toast } from 'react-toastify';
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
@@ -405,6 +407,8 @@ const App = (message, props) => {
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route exact path="/debug" element={<RuntimeDebugger userdata={userdata} globalUrl={globalUrl} /> } />
|
||||
<Route exact path="/workflows/debug" element={<RuntimeDebugger userdata={userdata} globalUrl={globalUrl} /> } />
|
||||
<Route
|
||||
exact
|
||||
path="/workflows/:key"
|
||||
|
||||
@@ -33,62 +33,62 @@ import {
|
||||
ListItem,
|
||||
ListItemAvatar,
|
||||
ListItemText,
|
||||
IconButton,
|
||||
IconButton,
|
||||
} from '@mui/material';
|
||||
|
||||
const AppSearchButtons = (props) => {
|
||||
const { userdata, globalUrl, appFramework, finishedApps, appType, totalApps, index, onNodeSelect, setDiscoveryData, appName, AppImage, setDefaultSearch, discoveryData, checkLogin, setMissing, } = props
|
||||
const { userdata, globalUrl, appFramework, moreButton, finishedApps, appType, totalApps, index, onNodeSelect, setDiscoveryData, appName, AppImage, setDefaultSearch, discoveryData, checkLogin, setMissing, } = props
|
||||
|
||||
const ref = useRef()
|
||||
let navigate = useNavigate();
|
||||
|
||||
const [isHover, setIsHover] = useState(false);
|
||||
const [localSearchOpen, setLocalSearchOpen] = useState(false)
|
||||
const [newSelectedApp, setNewSelectedApp] = useState(undefined)
|
||||
const [newSelectedApp, setNewSelectedApp] = useState(undefined)
|
||||
|
||||
useEffect(() => {
|
||||
console.log("AppSearchButtons: newSelectedApp: " + JSON.stringify(newSelectedApp))
|
||||
useEffect(() => {
|
||||
console.log("AppSearchButtons: newSelectedApp: " + JSON.stringify(newSelectedApp))
|
||||
|
||||
if (newSelectedApp !== undefined && setMissing != undefined) {
|
||||
console.log("AppSearchButtons: setMissing is defined!")
|
||||
if (newSelectedApp !== undefined && setMissing != undefined) {
|
||||
console.log("AppSearchButtons: setMissing is defined!")
|
||||
|
||||
const submitAppFramework = {
|
||||
"description": newSelectedApp.description,
|
||||
"id": newSelectedApp.objectID,
|
||||
"name": newSelectedApp.name,
|
||||
"type": appType,
|
||||
"large_image": newSelectedApp.image_url,
|
||||
}
|
||||
const submitAppFramework = {
|
||||
"description": newSelectedApp.description,
|
||||
"id": newSelectedApp.objectID,
|
||||
"name": newSelectedApp.name,
|
||||
"type": appType,
|
||||
"large_image": newSelectedApp.image_url,
|
||||
}
|
||||
|
||||
setFrameworkItem(submitAppFramework)
|
||||
setMissing(newSelectedApp)
|
||||
}
|
||||
}, [newSelectedApp])
|
||||
setFrameworkItem(submitAppFramework)
|
||||
setMissing(newSelectedApp)
|
||||
}
|
||||
}, [newSelectedApp])
|
||||
|
||||
if (appType === undefined) {
|
||||
console.log("Apptype is required in AppSearchButtons")
|
||||
return null;
|
||||
}
|
||||
if (appType === undefined) {
|
||||
console.log("Apptype is required in AppSearchButtons")
|
||||
return null;
|
||||
}
|
||||
|
||||
const buttonWidth = 450;
|
||||
const buttonMargin = 10;
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
setIsHover(true);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
setIsHover(false);
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
const foundApp = findSpecificApp(appFramework, appType)
|
||||
if (foundApp === undefined || foundApp === null) {
|
||||
console.log("AppSearchButtons: App not found in appFramework: " + appType)
|
||||
return null
|
||||
}
|
||||
const foundApp = findSpecificApp(appFramework, appType)
|
||||
if (foundApp === undefined || foundApp === null) {
|
||||
console.log("AppSearchButtons: App not found in appFramework: " + appType)
|
||||
return null
|
||||
}
|
||||
|
||||
const setFrameworkItem = (data) => {
|
||||
const setFrameworkItem = (data) => {
|
||||
|
||||
fetch(globalUrl + "/api/v1/apps/frameworkConfiguration", {
|
||||
method: "POST",
|
||||
@@ -99,187 +99,207 @@ const AppSearchButtons = (props) => {
|
||||
body: JSON.stringify(data),
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status !== 200) {
|
||||
console.log("Status not 200 for framework!");
|
||||
}
|
||||
.then((response) => {
|
||||
if (response.status !== 200) {
|
||||
console.log("Status not 200 for framework!");
|
||||
}
|
||||
|
||||
if (checkLogin !== undefined) {
|
||||
checkLogin()
|
||||
}
|
||||
if (checkLogin !== undefined) {
|
||||
checkLogin()
|
||||
}
|
||||
|
||||
return response;
|
||||
})
|
||||
.then((responseJson) => {
|
||||
if (responseJson.success === false) {
|
||||
if (responseJson.reason !== undefined) {
|
||||
toast("Failed updating: " + responseJson.reason)
|
||||
} else {
|
||||
toast("Failed to update framework for your org.")
|
||||
return response;
|
||||
})
|
||||
.then((responseJson) => {
|
||||
if (responseJson.success === false) {
|
||||
if (responseJson.reason !== undefined) {
|
||||
toast("Failed updating: " + responseJson.reason)
|
||||
} else {
|
||||
toast("Failed to update framework for your org.")
|
||||
|
||||
}
|
||||
}
|
||||
//setFrameworkLoaded(true)
|
||||
//setFrameworkData(responseJson)
|
||||
})
|
||||
.catch((error) => {
|
||||
if (checkLogin !== undefined) {
|
||||
checkLogin()
|
||||
}
|
||||
}
|
||||
}
|
||||
//setFrameworkLoaded(true)
|
||||
//setFrameworkData(responseJson)
|
||||
})
|
||||
.catch((error) => {
|
||||
if (checkLogin !== undefined) {
|
||||
checkLogin()
|
||||
}
|
||||
|
||||
toast(error.toString());
|
||||
//setFrameworkLoaded(true)
|
||||
})
|
||||
toast(error.toString());
|
||||
//setFrameworkLoaded(true)
|
||||
})
|
||||
}
|
||||
const icon = foundApp.large_image
|
||||
console.log("index:", moreButton)
|
||||
console.log("totalApps:", totalApps)
|
||||
|
||||
const icon = foundApp.large_image
|
||||
let xsValue = 12;
|
||||
if (index !== undefined && index !== 0) {
|
||||
if (index === totalApps - 1 || index === totalApps - 2 || index === totalApps - 3 || index === totalApps - 4) {
|
||||
xsValue = 6;
|
||||
}
|
||||
|
||||
if (index === totalApps - 4 && totalApps % 2 === 1) {
|
||||
}
|
||||
if (index === totalApps - 5) {
|
||||
xsValue = 12;
|
||||
}
|
||||
|
||||
if (index === totalApps - 1 || index === totalApps - 2 || index === totalApps - 3) {
|
||||
xsValue = 4;
|
||||
}
|
||||
if (moreButton) {
|
||||
switch (index) {
|
||||
case totalApps - 1:
|
||||
case totalApps - 2:
|
||||
case totalApps - 3:
|
||||
xsValue = 4;
|
||||
break;
|
||||
case totalApps - 4:
|
||||
case totalApps - 5:
|
||||
case totalApps - 6:
|
||||
case totalApps - 7:
|
||||
xsValue = 6;
|
||||
break;
|
||||
case totalApps - 8:
|
||||
xsValue = 12;
|
||||
break;
|
||||
default:
|
||||
// Handle other cases if needed
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Grid item xs={xsValue} style={{ alignItems: "center", marginTop: 5, }}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
<Grid item xs={xsValue} style={{ alignItems: "center", marginTop: 5, }}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
{localSearchOpen ? (
|
||||
<div
|
||||
style={{
|
||||
width: 319,
|
||||
height: 395,
|
||||
flexShrink: 0,
|
||||
marginLeft: 70,
|
||||
marginTop: 68,
|
||||
position: "absolute",
|
||||
zIndex: 100,
|
||||
borderRadius: 6,
|
||||
border: "1px solid var(--Container-Stroke, #494949)",
|
||||
background: "var(--Container, #212121)",
|
||||
boxShadow: "8px 8px 32px 24px rgba(0, 0, 0, 0.16)",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ display: "flex", textAlign: "center", textTransform: "capitalize" }}>
|
||||
<Typography style={{ padding: 16, color: "#FFFFFF", textTransform: "capitalize" }}> {discoveryData} </Typography>
|
||||
</div>
|
||||
<div style={{ display: "flex" }}>
|
||||
<Tooltip
|
||||
title="Close"
|
||||
placement="top"
|
||||
style={{ zIndex: 10011 }}
|
||||
>
|
||||
<IconButton
|
||||
style={{
|
||||
flex: 1,
|
||||
// width: 224,
|
||||
marginLeft: discoveryData === ("communication") ? 112 : 200,
|
||||
width: "100%",
|
||||
marginBottom: 23,
|
||||
fontSize: 16,
|
||||
background: "rgba(33, 33, 33, 1)",
|
||||
borderColor: "rgba(33, 33, 33, 1)",
|
||||
borderRadius: 8,
|
||||
}}
|
||||
onClick={() => {
|
||||
setLocalSearchOpen(false)
|
||||
}}
|
||||
>
|
||||
<Closeicon style={{ width: 16 }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
title="Delete app"
|
||||
placement="bottom"
|
||||
style={{ zIndex: 10011 }}
|
||||
>
|
||||
<IconButton
|
||||
style={{ zIndex: 12501, position: "absolute", top: 32, right: 16 }}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setLocalSearchOpen(false)
|
||||
setDefaultSearch("")
|
||||
const submitDeletedApp = {
|
||||
"description": "",
|
||||
"id": "remove",
|
||||
"name": "",
|
||||
"type": discoveryData
|
||||
}
|
||||
setFrameworkItem(submitDeletedApp)
|
||||
setNewSelectedApp({})
|
||||
setTimeout(() => {
|
||||
setDiscoveryData({})
|
||||
setFrameworkItem(submitDeletedApp)
|
||||
//setNewSelectedApp({})
|
||||
}, 1000)
|
||||
//setAppName(discoveryData.cases.name)
|
||||
}}
|
||||
>
|
||||
<DeleteIcon style={{ color: "white", height: 15, width: 15, }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{ width: "100%", border: "1px #494949 solid" }}
|
||||
/>
|
||||
<AppSearch
|
||||
defaultSearch={appType}
|
||||
userdata={userdata}
|
||||
newSelectedApp={newSelectedApp}
|
||||
setNewSelectedApp={setNewSelectedApp}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<div style={{ display: "flex", height: 70, border: isHover ? "1px solid #f85a3e" : "var(--Container, #212121)", borderRadius: 8, background: isHover ? "var(--Container, #212121)":"var(--Container, #212121)",
|
||||
alignItems: "center", justifyContent: "center",}}
|
||||
>
|
||||
<Button
|
||||
fullWidth
|
||||
color="secondary"
|
||||
{localSearchOpen ? (
|
||||
<div
|
||||
style={{
|
||||
height:"100%",
|
||||
width:"100%",
|
||||
display:"grid"
|
||||
}}
|
||||
onClick={(event) => {
|
||||
if (onNodeSelect !== undefined) {
|
||||
onNodeSelect(appType);
|
||||
} else {
|
||||
setLocalSearchOpen(true)
|
||||
}
|
||||
|
||||
if (setDefaultSearch !== undefined) {
|
||||
setDefaultSearch(appType)
|
||||
}
|
||||
width: 319,
|
||||
height: 395,
|
||||
flexShrink: 0,
|
||||
marginLeft: 70,
|
||||
marginTop: 68,
|
||||
position: "absolute",
|
||||
zIndex: 100,
|
||||
borderRadius: 6,
|
||||
border: "1px solid var(--Container-Stroke, #494949)",
|
||||
background: "var(--Container, #212121)",
|
||||
boxShadow: "8px 8px 32px 24px rgba(0, 0, 0, 0.16)",
|
||||
}}
|
||||
>
|
||||
<div style={{ display:"flex", textAlign:"center", justifyContent: "center", alignItems:"center", marginRight: "auto" }}>
|
||||
{AppImage === undefined || AppImage === null || AppImage.length === 0 ?
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ display: "flex", textAlign: "center", textTransform: "capitalize" }}>
|
||||
<Typography style={{ padding: 16, color: "#FFFFFF", textTransform: "capitalize" }}> {discoveryData} </Typography>
|
||||
</div>
|
||||
<div style={{ display: "flex" }}>
|
||||
<Tooltip
|
||||
title="Close"
|
||||
placement="top"
|
||||
style={{ zIndex: 10011 }}
|
||||
>
|
||||
<IconButton
|
||||
style={{
|
||||
flex: 1,
|
||||
// width: 224,
|
||||
marginLeft: discoveryData === ("communication") ? 112 : 200,
|
||||
width: "100%",
|
||||
marginBottom: 23,
|
||||
fontSize: 16,
|
||||
background: "rgba(33, 33, 33, 1)",
|
||||
borderColor: "rgba(33, 33, 33, 1)",
|
||||
borderRadius: 8,
|
||||
}}
|
||||
onClick={() => {
|
||||
setLocalSearchOpen(false)
|
||||
}}
|
||||
>
|
||||
<Closeicon style={{ width: 16 }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
title="Delete app"
|
||||
placement="bottom"
|
||||
style={{ zIndex: 10011 }}
|
||||
>
|
||||
<IconButton
|
||||
style={{ zIndex: 12501, position: "absolute", top: 32, right: 16 }}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setLocalSearchOpen(false)
|
||||
setDefaultSearch("")
|
||||
const submitDeletedApp = {
|
||||
"description": "",
|
||||
"id": "remove",
|
||||
"name": "",
|
||||
"type": discoveryData
|
||||
}
|
||||
setFrameworkItem(submitDeletedApp)
|
||||
setNewSelectedApp({})
|
||||
setTimeout(() => {
|
||||
setDiscoveryData({})
|
||||
setFrameworkItem(submitDeletedApp)
|
||||
//setNewSelectedApp({})
|
||||
}, 1000)
|
||||
//setAppName(discoveryData.cases.name)
|
||||
}}
|
||||
>
|
||||
<DeleteIcon style={{ color: "white", height: 15, width: 15, }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{ width: "100%", border: "1px #494949 solid" }}
|
||||
/>
|
||||
<AppSearch
|
||||
defaultSearch={appType}
|
||||
userdata={userdata}
|
||||
newSelectedApp={newSelectedApp}
|
||||
setNewSelectedApp={setNewSelectedApp}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<div style={{
|
||||
display: "flex", height: 70, border: isHover ? "1px solid #f85a3e" : "var(--Container, #212121)", borderRadius: 8, background: isHover ? "var(--Container, #212121)" : "var(--Container, #212121)",
|
||||
alignItems: "center", justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
fullWidth
|
||||
color="secondary"
|
||||
style={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
display: "grid"
|
||||
}}
|
||||
onClick={(event) => {
|
||||
if (onNodeSelect !== undefined) {
|
||||
onNodeSelect(appType);
|
||||
} else {
|
||||
setLocalSearchOpen(true)
|
||||
}
|
||||
|
||||
if (setDefaultSearch !== undefined) {
|
||||
setDefaultSearch(appType)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", textAlign: "center", justifyContent: "center", alignItems: "center", marginRight: "auto" }}>
|
||||
{AppImage === undefined || AppImage === null || AppImage.length === 0 ?
|
||||
<div style={{ width: 40, height: 40, borderRadius: 9999, backgroundColor: "#2F2F2F", textAlign: "center" }}>
|
||||
<img style={{paddingLeft: 11, paddingTop: 11, width: 40, height: 40, flexShrink: 0, }} src={icon} />
|
||||
<img style={{ paddingLeft: 11, paddingTop: 11, width: 40, height: 40, flexShrink: 0, }} src={icon} />
|
||||
</div>
|
||||
:
|
||||
<img style={{ marginRight: 8, width: 35, height: 35, flexShrink: 0, borderRadius: 40, }} src={AppImage} />
|
||||
}
|
||||
:
|
||||
<img style={{ marginRight: 8, width: 35, height: 35, flexShrink: 0, borderRadius: 40, }} src={AppImage} />
|
||||
}
|
||||
<div style={{ marginLeft: 8, }}>
|
||||
<Typography style={{
|
||||
display: "flex",
|
||||
border: "none",
|
||||
<Typography style={{
|
||||
display: "flex",
|
||||
border: "none",
|
||||
fontSize: 16,
|
||||
textTransform: ["siem", "edr", "iam"].includes(appType.toLowerCase()) ? "uppercase" : 'capitalize'
|
||||
}} >
|
||||
{appType}
|
||||
</Typography>
|
||||
{appName === undefined || appName === undefined ||
|
||||
{appName === undefined || appName === undefined ||
|
||||
appName === null || appName === null || appName.length === 0 ?
|
||||
""
|
||||
:
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import theme from '../theme.jsx';
|
||||
import ReactGA from 'react-ga4';
|
||||
import { useNavigate, Link } from 'react-router-dom';
|
||||
import {isMobile} from "react-device-detect";
|
||||
import { useNavigate, Link, } from 'react-router-dom';
|
||||
import { isMobile } from "react-device-detect";
|
||||
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'
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
@@ -13,6 +13,7 @@ import NewReleasesIcon from "@mui/icons-material/NewReleases";
|
||||
import ExtensionIcon from "@mui/icons-material/Extension";
|
||||
import EmailIcon from "@mui/icons-material/Email";
|
||||
import FingerprintIcon from '@mui/icons-material/Fingerprint';
|
||||
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
||||
import AppSearch from "../components/Appsearch.jsx";
|
||||
import AppSearchButtons from "../components/AppSearchButtons.jsx";
|
||||
import { toast } from 'react-toastify';
|
||||
@@ -60,7 +61,7 @@ const AppSelection = props => {
|
||||
let navigate = useNavigate();
|
||||
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
|
||||
|
||||
useEffect(() => {
|
||||
useEffect(() => {
|
||||
if (newSelectedApp === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID.length === 0) {
|
||||
return
|
||||
}
|
||||
@@ -109,17 +110,17 @@ const AppSelection = props => {
|
||||
// value.type = key;
|
||||
// tempApps.push(value);
|
||||
// });
|
||||
|
||||
|
||||
// // Define the custom sorting order
|
||||
// const customSortingOrder = ["CASES", "SIEM", "ENDPOINT", "INTEL", "EMAIL"];
|
||||
|
||||
const lastApps = {}
|
||||
let endTypes = ["network", "assets", "iam"]
|
||||
|
||||
if (appFramework === undefined || appFramework === null || Object.keys(appFramework).length === 0) {
|
||||
//window.location.href = "/welcome"
|
||||
return
|
||||
}
|
||||
if (appFramework === undefined || appFramework === null || Object.keys(appFramework).length === 0) {
|
||||
//window.location.href = "/welcome"
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
Object.entries(appFramework).forEach(([key, value]) => {
|
||||
@@ -129,7 +130,7 @@ const AppSelection = props => {
|
||||
|
||||
value.type = key;
|
||||
|
||||
if (endTypes.includes(value.type.toLowerCase())) {
|
||||
if (endTypes.includes(value.type.toLowerCase())) {
|
||||
lastApps[value.type] = value
|
||||
return
|
||||
}
|
||||
@@ -137,7 +138,7 @@ const AppSelection = props => {
|
||||
if (lastPosted.type === value.type) {
|
||||
value = lastPosted
|
||||
}
|
||||
|
||||
|
||||
tempApps.push(JSON.parse(JSON.stringify(value)));
|
||||
});
|
||||
|
||||
@@ -157,8 +158,8 @@ const AppSelection = props => {
|
||||
|
||||
if (moreButton) {
|
||||
tempApps.push(JSON.parse(JSON.stringify(lastApps["network"])))
|
||||
tempApps.push(JSON.parse(JSON.stringify(lastApps["assets"])))
|
||||
tempApps.push(JSON.parse(JSON.stringify(lastApps["iam"])))
|
||||
tempApps.push(JSON.parse(JSON.stringify(lastApps["assets"])))
|
||||
tempApps.push(JSON.parse(JSON.stringify(lastApps["iam"])))
|
||||
}
|
||||
|
||||
setAppButtons(tempApps)
|
||||
@@ -167,10 +168,10 @@ const AppSelection = props => {
|
||||
}
|
||||
}, [lastPosted, moreButton])
|
||||
|
||||
if (appFramework === undefined || appFramework === null || Object.keys(appFramework).length === 0) {
|
||||
//window.location.href = "/welcome"
|
||||
return null
|
||||
}
|
||||
if (appFramework === undefined || appFramework === null || Object.keys(appFramework).length === 0) {
|
||||
//window.location.href = "/welcome"
|
||||
return null
|
||||
}
|
||||
|
||||
const setFrameworkItem = (data) => {
|
||||
console.log("Setting framework item: ", data, isCloud)
|
||||
@@ -276,7 +277,7 @@ const AppSelection = props => {
|
||||
});
|
||||
}
|
||||
|
||||
console.log("NODESELECT: ", label)
|
||||
console.log("NODESELECT: ", label)
|
||||
|
||||
setDiscoveryData(label)
|
||||
setSelectionOpen(true)
|
||||
@@ -285,7 +286,7 @@ const AppSelection = props => {
|
||||
setNewSelectedApp(undefined)
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// const sizing = moreButton ? 510 : 480;
|
||||
const buttonWidth = 450;
|
||||
@@ -304,12 +305,29 @@ const AppSelection = props => {
|
||||
|
||||
return (
|
||||
<Collapse in={true}>
|
||||
<Tooltip
|
||||
title="Back"
|
||||
placement="top"
|
||||
style={{ zIndex: 10011 }}
|
||||
>
|
||||
<IconButton
|
||||
style={{
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate('/welcome');
|
||||
window.location.reload();
|
||||
}}
|
||||
>
|
||||
<ArrowBackIcon style={{ width: 20 }} />
|
||||
<Typography style={{fontSize : 16, marginLeft : 2}}>Back</Typography>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<div
|
||||
style={{
|
||||
// minHeight: sizing,
|
||||
// maxHeight: sizing,
|
||||
marginTop: 10,
|
||||
width: isMobile ? 380 : 500,
|
||||
width: isMobile ? 350 : 500,
|
||||
marginBottom: 25,
|
||||
textAlign: isMobile ? "center" : null,
|
||||
}}
|
||||
@@ -428,59 +446,59 @@ const AppSelection = props => {
|
||||
Select the apps you work with and we will connect them for you.
|
||||
</Typography>
|
||||
<Grid rowSpacing={1} columnSpacing={2} container >
|
||||
{appButtons.map((appData, index) => {
|
||||
// This is here due to a memory issue with setting apps properly
|
||||
if (appData.id === "remove") {
|
||||
console.log("Removed as appdata is overridden: ", appData)
|
||||
{appButtons.map((appData, index) => {
|
||||
// This is here due to a memory issue with setting apps properly
|
||||
if (appData.id === "remove") {
|
||||
console.log("Removed as appdata is overridden: ", appData)
|
||||
|
||||
appData = {
|
||||
"count": 0,
|
||||
"description": "",
|
||||
"id": "",
|
||||
"large_image": "",
|
||||
"name": "",
|
||||
"type": appData.type,
|
||||
}
|
||||
}
|
||||
appData = {
|
||||
"count": 0,
|
||||
"description": "",
|
||||
"id": "",
|
||||
"large_image": "",
|
||||
"name": "",
|
||||
"type": appData.type,
|
||||
}
|
||||
}
|
||||
|
||||
const appName = appData.name
|
||||
const AppImage = appData.large_image
|
||||
const appType = appData.type
|
||||
const appName = appData.name
|
||||
const AppImage = appData.large_image
|
||||
const appType = appData.type
|
||||
|
||||
return (
|
||||
<AppSearchButtons
|
||||
appFramework={appFramework}
|
||||
index={index}
|
||||
totalApps={appButtons.length}
|
||||
appName={appName}
|
||||
appType={appType}
|
||||
AppImage={AppImage}
|
||||
defaultSearch={defaultSearch}
|
||||
finishedApps={finishedApps}
|
||||
onNodeSelect={onNodeSelect}
|
||||
discoveryData={discoveryData}
|
||||
setDiscoveryData={setDiscoveryData}
|
||||
setDefaultSearch={setDefaultSearch}
|
||||
apps={apps}
|
||||
setMoreButton={setMoreButton}
|
||||
moreButton={moreButton}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
return (
|
||||
<AppSearchButtons
|
||||
appFramework={appFramework}
|
||||
index={index}
|
||||
totalApps={appButtons.length}
|
||||
appName={appName}
|
||||
appType={appType}
|
||||
AppImage={AppImage}
|
||||
defaultSearch={defaultSearch}
|
||||
finishedApps={finishedApps}
|
||||
onNodeSelect={onNodeSelect}
|
||||
discoveryData={discoveryData}
|
||||
setDiscoveryData={setDiscoveryData}
|
||||
setDefaultSearch={setDefaultSearch}
|
||||
apps={apps}
|
||||
setMoreButton={setMoreButton}
|
||||
moreButton={moreButton}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Grid>
|
||||
</div>
|
||||
{!moreButton ? (
|
||||
<div style={{width: "100%", marginLeft: isMobile ? 100 : 200, marginBottom: 20, textAlign: isMobile ? "center" : null}}>
|
||||
<Link style={{color:"#FF8444"}} onClick={()=>{
|
||||
setMoreButton(true)
|
||||
<div style={{ width: "100%", marginLeft: isMobile ? 80 : 200, marginBottom: 20, textAlign: isMobile ? "center" : null }}>
|
||||
<Link style={{ color: "#FF8444" }} onClick={() => {
|
||||
setMoreButton(true)
|
||||
|
||||
setTimeout(() => {
|
||||
navigate("/welcome?tab=2")
|
||||
}, 250)
|
||||
}}
|
||||
>See More Apps</Link>
|
||||
</div>): ""}
|
||||
<div style={{ flexDirection: "row", width: isMobile ? 380 : null, textAlign: isMobile ? "center" : null}}>
|
||||
setTimeout(() => {
|
||||
navigate("/welcome?tab=2")
|
||||
}, 250)
|
||||
}}
|
||||
>See More Apps</Link>
|
||||
</div>) : ""}
|
||||
<div style={{ flexDirection: "row", width: isMobile ? 340 : null, textAlign: isMobile ? "center" : null }}>
|
||||
<Button variant="contained" type="submit" fullWidth style={bottomButtonStyle} onClick={() => {
|
||||
navigate("/welcome?tab=3")
|
||||
setActiveStep(2)
|
||||
|
||||
@@ -56,13 +56,13 @@ const AuthenticationData = (props) => {
|
||||
if (!responseJson.success) {
|
||||
toast("Failed to set app auth: " + responseJson.reason);
|
||||
} else {
|
||||
if (getAppAuthentication !== undefined) {
|
||||
getAppAuthentication()
|
||||
}
|
||||
if (getAppAuthentication !== undefined) {
|
||||
getAppAuthentication()
|
||||
}
|
||||
|
||||
if (setAuthenticationModalOpen !== undefined) {
|
||||
setAuthenticationModalOpen(false)
|
||||
}
|
||||
if (setAuthenticationModalOpen !== undefined) {
|
||||
setAuthenticationModalOpen(false)
|
||||
}
|
||||
|
||||
// Needs a refresh with the new authentication..
|
||||
//toast("Successfully saved new app auth")
|
||||
|
||||
@@ -887,6 +887,31 @@ const Billing = (props) => {
|
||||
"Shuffle is an Open Source automation platform, and no license is required to use it. You may however activate Cloud Sync, get our Scale license, get help with Kubernetes, or talk to Shuffle's Support team to get automation help."
|
||||
}
|
||||
</Typography>
|
||||
|
||||
{userdata.support === true ?
|
||||
<div style={{marginBottom: 10, }}>
|
||||
For sales: Create
|
||||
<a href={"https://docs.google.com/document/d/1OeJSi42812EMg7fUAw1HAj1ymOG8rfp8Ma_DGJKvwgI/copy?usp=sharing&organization=" + selectedOrganization.id} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "#f85a3e" }}>
|
||||
New Cloud Contract
|
||||
</a>
|
||||
or
|
||||
<a href={"https://docs.google.com/document/d/1IguxpeV4Wwwr9C0MPyUNhhajEu_PxjRfP7f0hYyRYOI/copy?usp=sharing&organization=" + selectedOrganization.id} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "#f85a3e" }}>
|
||||
New Onprem Contract
|
||||
</a>
|
||||
-
|
||||
<a href={"https://drive.google.com/drive/folders/1zVvwwkbQXW3p-DJYa0GBDzFo_ZnV_I_5"} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "#f85a3e" }}>
|
||||
Google Drive Link
|
||||
</a>
|
||||
-
|
||||
<a href={"https://github.com/Shuffle/Shuffle-docs/tree/master/handbook/Sales"} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "#f85a3e" }}>
|
||||
Sales Process
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
<div style={{display: "flex", maxWidth: 768, minWidth: 768, }}>
|
||||
{isCloud && billingInfo.subscription !== undefined && billingInfo.subscription !== null ?
|
||||
<SubscriptionObject
|
||||
@@ -1009,6 +1034,8 @@ const Billing = (props) => {
|
||||
</Grid>
|
||||
*/}
|
||||
</div>
|
||||
|
||||
|
||||
{isCloud &&
|
||||
selectedOrganization.partner_info !== undefined &&
|
||||
selectedOrganization.partner_info.reseller === true ? (
|
||||
|
||||
@@ -339,7 +339,7 @@ const CacheView = (props) => {
|
||||
<div style={{ marginTop: 20, marginBottom: 20 }}>
|
||||
<h2 style={{ display: "inline" }}>Shuffle Datastore</h2>
|
||||
<span style={{ marginLeft: 25 }}>
|
||||
Datastore is a key-value store for storing data that can be used cross-workflow.
|
||||
Datastore is a permanent key-value database for storing data that can be used cross-workflow. You can store anything from lists of IPs to complex configurations.
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
|
||||
@@ -1256,7 +1256,7 @@ const ConfigureWorkflow = (props) => {
|
||||
</Typography>
|
||||
: null}
|
||||
|
||||
<List style={{paddingBottom: 250, }}>
|
||||
<List style={{paddingBottom: window.location.pathname.includes("/workflows/") ? 0 : 250, }}>
|
||||
{requiredActions.map((data, index) => {
|
||||
return (
|
||||
<div key={index} style={{marginBottom: 10, }}>
|
||||
|
||||
@@ -5,6 +5,7 @@ import 'react-alice-carousel/lib/alice-carousel.css';
|
||||
import TrendingFlatIcon from '@mui/icons-material/TrendingFlat';
|
||||
import theme from '../theme.jsx';
|
||||
import {isMobile} from "react-device-detect";
|
||||
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
||||
import CheckBoxSharpIcon from '@mui/icons-material/CheckBoxSharp';
|
||||
import { findSpecificApp } from "../components/AppFramework.jsx"
|
||||
import {
|
||||
@@ -291,11 +292,29 @@ const ExploreWorkflow = (props) => {
|
||||
|
||||
return (
|
||||
<div style={{ marginTop: 0, margin: "auto", minHeight: sizing, maxHeight: sizing, }}>
|
||||
<Tooltip
|
||||
title="Back"
|
||||
placement="top"
|
||||
style={{ zIndex: 10011 }}
|
||||
>
|
||||
<IconButton
|
||||
style={{
|
||||
marginRight: isMobile ? 230 : null
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate('/welcome?tab=2');
|
||||
window.location.reload();
|
||||
}}
|
||||
>
|
||||
<ArrowBackIcon style={{ width: 20 }} />
|
||||
<Typography style={{fontSize : 16, marginLeft : 2}}>Back</Typography>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{modalView}
|
||||
<Typography variant="h4" style={{ marginLeft: 8, marginTop: isMobile ? null : 40, marginRight: 30, marginBottom: 0, }} color="rgba(241, 241, 241, 1)">
|
||||
Start using workflows
|
||||
</Typography>
|
||||
<Typography variant="body2" style={{ marginLeft: 8, marginTop: 10, marginRight: 30, marginBottom: 40, }} color="rgba(158, 158, 158, 1)">
|
||||
<Typography variant="body2" style={{ marginLeft: isMobile ? null : 8, marginTop: isMobile ? 5 : 10, marginRight: isMobile ? null : 100, marginBottom: isMobile ? 20 : 40, }} color="rgba(158, 158, 158, 1)">
|
||||
Based on what you selected workflows, here are our recommendations! You will see more of these later.
|
||||
</Typography>
|
||||
|
||||
|
||||
@@ -382,7 +382,7 @@ const Files = (props) => {
|
||||
<div style={{ marginTop: 20, marginBottom: 20 }}>
|
||||
<h2 style={{ display: "inline" }}>Files</h2>
|
||||
<span style={{ marginLeft: 25 }}>
|
||||
Files from Workflows.{" "}
|
||||
Files from Workflows are a way to store as well as edit files.{" "}
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
|
||||
@@ -43,9 +43,8 @@ import {
|
||||
Lightbulb as LightbulbIcon,
|
||||
} from "@mui/icons-material";
|
||||
|
||||
//import { useAlert
|
||||
|
||||
import SearchField from '../components/Searchfield.jsx'
|
||||
|
||||
const hoverColor = "#f85a3e"
|
||||
const hoverOutColor = "#e8eaf6"
|
||||
|
||||
@@ -615,7 +614,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
|
||||
|
||||
</List>
|
||||
</div>
|
||||
<div style={{flex: 1, marginTop: 0,}}>
|
||||
<div style={{flex: 1, marginTop: 10,}}>
|
||||
<SearchField serverside={serverside} userdata={userdata} />
|
||||
</div>
|
||||
<div style={{flex: 1, display: "flex", flexDirection: "row-reverse"}}>
|
||||
@@ -747,7 +746,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
|
||||
*/}
|
||||
</List>
|
||||
</div>
|
||||
<div style={{flex: 1, marginTop: 0,}}>
|
||||
<div style={{flex: 1, marginTop: 10,}}>
|
||||
<SearchField serverside={serverside} userdata={userdata} />
|
||||
</div>
|
||||
<div style={{flex: 1, display: "flex", flexDirection: "row-reverse"}}>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -93,10 +93,10 @@ const AuthenticationOauth2 = (props) => {
|
||||
appAuthentication,
|
||||
setSelectedAction,
|
||||
setNewAppAuth,
|
||||
isCloud,
|
||||
autoAuth,
|
||||
authButtonOnly,
|
||||
isLoggedIn,
|
||||
isCloud,
|
||||
autoAuth,
|
||||
authButtonOnly,
|
||||
isLoggedIn,
|
||||
} = props;
|
||||
|
||||
let navigate = useNavigate();
|
||||
@@ -125,7 +125,7 @@ const AuthenticationOauth2 = (props) => {
|
||||
const allscopes = authenticationType.scope !== undefined ? authenticationType.scope : [];
|
||||
|
||||
|
||||
const [selectedScopes, setSelectedScopes] = React.useState(allscopes.length === 1 ? [allscopes[0]] : [])
|
||||
const [selectedScopes, setSelectedScopes] = React.useState(allscopes.length > 0 && allscopes.length <= 3 ? [allscopes[0]] : [])
|
||||
const [manuallyConfigure, setManuallyConfigure] = React.useState(
|
||||
defaultConfigSet ? false : true
|
||||
);
|
||||
@@ -297,15 +297,63 @@ const AuthenticationOauth2 = (props) => {
|
||||
|
||||
|
||||
const handleOauth2Request = (client_id, client_secret, oauth_url, scopes, admin_consent, prompt) => {
|
||||
setButtonClicked(true);
|
||||
//console.log("SCOPES: ", scopes);
|
||||
|
||||
if ((authenticationType.redirect_uri === undefined || authenticationType.redirect_uri === null || authenticationType.redirect_uri.length === 0) && (authenticationType.token_uri !== undefined && authenticationType.token_uri !== null && authenticationType.token_uri.length > 0)) {
|
||||
console.log("No redirect URI found, and token URI found. Assuming client credentials flow and saving directly in the database")
|
||||
|
||||
// Find app.configuration=true fields in the app.paramters
|
||||
var parsedFields = [{
|
||||
"key": "client_id",
|
||||
"value": client_id,
|
||||
},
|
||||
{
|
||||
"key": "client_secret",
|
||||
"value": client_secret,
|
||||
},
|
||||
{
|
||||
"key": "scope",
|
||||
"value": scopes.join(","),
|
||||
},
|
||||
{
|
||||
"key": "token_uri",
|
||||
"value": authenticationType.token_uri,
|
||||
}]
|
||||
|
||||
const appAuthData = {
|
||||
"label": "OAuth2 for " + selectedApp.name,
|
||||
"app": {
|
||||
"id": selectedApp.id,
|
||||
"name": selectedApp.name,
|
||||
"version": selectedApp.version,
|
||||
"large_image": selectedApp.large_image,
|
||||
},
|
||||
"fields": parsedFields,
|
||||
"type": "oauth2-app",
|
||||
"reference_workflow": workflowId,
|
||||
}
|
||||
|
||||
setNewAppAuth(appAuthData)
|
||||
// Wait 1 second, then get app auth with update
|
||||
//
|
||||
if (getAppAuthentication !== undefined) {
|
||||
setTimeout(() => {
|
||||
getAppAuthentication(true, true, true);
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
setButtonClicked(true);
|
||||
//console.log("SCOPES: ", scopes);
|
||||
|
||||
client_id = client_id.trim()
|
||||
client_secret = client_secret.trim()
|
||||
oauth_url = oauth_url.trim()
|
||||
|
||||
var resources = "";
|
||||
if (scopes !== undefined && (scopes !== null) & (scopes.length > 0)) {
|
||||
var resources = "";
|
||||
if (scopes !== undefined && (scopes !== null) & (scopes.length > 0)) {
|
||||
console.log("IN scope 1")
|
||||
if (offlineAccess === true && !scopes.includes("offline_access")) {
|
||||
|
||||
@@ -324,26 +372,26 @@ const AuthenticationOauth2 = (props) => {
|
||||
//console.log("AUTH: ", authenticationType)
|
||||
//console.log("SCOPES2: ", resources)
|
||||
const redirectUri = `${window.location.protocol}//${window.location.host}/set_authentication`;
|
||||
const workflowId = workflow !== undefined ? workflow.id : "";
|
||||
const workflowId = workflow !== undefined ? workflow.id : "";
|
||||
var state = `workflow_id%3D${workflowId}%26reference_action_id%3d${selectedAction.app_id}%26app_name%3d${selectedAction.app_name}%26app_id%3d${selectedAction.app_id}%26app_version%3d${selectedAction.app_version}%26authentication_url%3d${authentication_url}%26scope%3d${resources}%26client_id%3d${client_id}%26client_secret%3d${client_secret}`;
|
||||
|
||||
|
||||
// This is to make sure authorization can be handled WITHOUT being logged in,
|
||||
// kind of making it act like an api key
|
||||
// https://shuffler.io/authorization -> 3rd party integration auth
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const userAuth = urlParams.get("authorization");
|
||||
if (userAuth !== undefined && userAuth !== null && userAuth.length > 0) {
|
||||
console.log("Adding authorization from user side")
|
||||
state += `%26authorization%3d${userAuth}`;
|
||||
}
|
||||
// This is to make sure authorization can be handled WITHOUT being logged in,
|
||||
// kind of making it act like an api key
|
||||
// https://shuffler.io/authorization -> 3rd party integration auth
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const userAuth = urlParams.get("authorization");
|
||||
if (userAuth !== undefined && userAuth !== null && userAuth.length > 0) {
|
||||
console.log("Adding authorization from user side")
|
||||
state += `%26authorization%3d${userAuth}`;
|
||||
}
|
||||
|
||||
// Check for org_id
|
||||
const orgId = urlParams.get("org_id");
|
||||
if (orgId !== undefined && orgId !== null && orgId.length > 0) {
|
||||
console.log("Adding org_id from user side")
|
||||
state += `%26org_id%3d${orgId}`;
|
||||
}
|
||||
// Check for org_id
|
||||
const orgId = urlParams.get("org_id");
|
||||
if (orgId !== undefined && orgId !== null && orgId.length > 0) {
|
||||
console.log("Adding org_id from user side")
|
||||
state += `%26org_id%3d${orgId}`;
|
||||
}
|
||||
|
||||
if (oauth_url !== undefined && oauth_url !== null && oauth_url.length > 0) {
|
||||
state += `%26oauth_url%3d${oauth_url}`;
|
||||
@@ -363,7 +411,7 @@ const AuthenticationOauth2 = (props) => {
|
||||
|
||||
// No prompt forcing
|
||||
//var url = `${authenticationType.redirect_uri}?client_id=${client_id}&redirect_uri=${redirectUri}&response_type=code&prompt=login&scope=${resources}&state=${state}&access_type=offline`;
|
||||
var defaultPrompt = "login"
|
||||
var defaultPrompt = "login"
|
||||
if (prompt !== undefined && prompt !== null && prompt.length > 0) {
|
||||
defaultPrompt = prompt
|
||||
}
|
||||
@@ -404,9 +452,9 @@ const AuthenticationOauth2 = (props) => {
|
||||
//alert('"Secure Payment" window closed!');
|
||||
//
|
||||
|
||||
if (getAppAuthentication !== undefined) {
|
||||
getAppAuthentication(true, true, true);
|
||||
}
|
||||
if (getAppAuthentication !== undefined) {
|
||||
getAppAuthentication(true, true, true);
|
||||
}
|
||||
} else {
|
||||
console.log("Not closed")
|
||||
}
|
||||
@@ -798,6 +846,7 @@ const AuthenticationOauth2 = (props) => {
|
||||
}}
|
||||
fullWidth
|
||||
color="primary"
|
||||
label={"Client ID"}
|
||||
placeholder={"Client ID"}
|
||||
onChange={(event) => {
|
||||
setClientId(event.target.value);
|
||||
@@ -816,20 +865,22 @@ const AuthenticationOauth2 = (props) => {
|
||||
}}
|
||||
fullWidth
|
||||
color="primary"
|
||||
label={"Client Secret"}
|
||||
placeholder={"Client Secret"}
|
||||
onChange={(event) => {
|
||||
setClientSecret(event.target.value);
|
||||
//authenticationOption.label = event.target.value
|
||||
}}
|
||||
/>
|
||||
{allscopes.length === 0 ? null : "Scopes (access rights)"}
|
||||
{allscopes.length === 0 ? null : (
|
||||
<div style={{width: "100%", marginTop: 10, display: "flex"}}>
|
||||
<span>
|
||||
Scopes
|
||||
<Select
|
||||
multiple
|
||||
underline={false}
|
||||
value={selectedScopes}
|
||||
label="Scopes"
|
||||
style={{
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
color: "white",
|
||||
@@ -855,17 +906,20 @@ const AuthenticationOauth2 = (props) => {
|
||||
})}
|
||||
</Select>
|
||||
</span>
|
||||
<span>
|
||||
<Tooltip
|
||||
color="primary"
|
||||
title={"Automatic Refresh (default: true)"}
|
||||
placement="top"
|
||||
>
|
||||
<Checkbox style={{paddingTop: 20}} color="secondary" checked={offlineAccess} onClick={() => {
|
||||
setOfflineAccess(!offlineAccess)
|
||||
}}/>
|
||||
</Tooltip>
|
||||
</span>
|
||||
|
||||
{((authenticationType.redirect_uri === undefined || authenticationType.redirect_uri === null || authenticationType.redirect_uri.length === 0) && (authenticationType.token_uri !== undefined && authenticationType.token_uri !== null && authenticationType.token_uri.length > 0)) ? null :
|
||||
<span>
|
||||
<Tooltip
|
||||
color="primary"
|
||||
title={"Automatic Refresh (default: true)"}
|
||||
placement="top"
|
||||
>
|
||||
<Checkbox style={{paddingTop: 20}} color="secondary" checked={offlineAccess} onClick={() => {
|
||||
setOfflineAccess(!offlineAccess)
|
||||
}}/>
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
@@ -882,19 +936,14 @@ const AuthenticationOauth2 = (props) => {
|
||||
variant="contained"
|
||||
fullWidth
|
||||
onClick={() => {
|
||||
handleOauth2Request(
|
||||
clientId,
|
||||
clientSecret,
|
||||
oauthUrl,
|
||||
selectedScopes
|
||||
);
|
||||
handleOauth2Request(clientId, clientSecret, oauthUrl, selectedScopes);
|
||||
}}
|
||||
color="primary"
|
||||
>
|
||||
{buttonClicked ? (
|
||||
<CircularProgress style={{ color: "white" }} />
|
||||
) : (
|
||||
"Manually Authenticate"
|
||||
"Authenticate"
|
||||
)}
|
||||
</Button>
|
||||
|
||||
|
||||
@@ -0,0 +1,800 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
|
||||
import theme from '../theme.jsx';
|
||||
import { useNavigate, Link, useParams } from "react-router-dom";
|
||||
|
||||
import {
|
||||
Chip,
|
||||
IconButton,
|
||||
TextField,
|
||||
InputAdornment,
|
||||
List,
|
||||
Card,
|
||||
ListItem,
|
||||
ListItemAvatar,
|
||||
ListItemText,
|
||||
Avatar,
|
||||
Grid,
|
||||
Typography,
|
||||
Tooltip,
|
||||
Divider,
|
||||
Button,
|
||||
} from '@mui/material';
|
||||
import ArticleIcon from '@mui/icons-material/Article';
|
||||
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
|
||||
import ManageSearchIcon from '@mui/icons-material/ManageSearch';
|
||||
import {
|
||||
AvatarGroup,
|
||||
} from "@mui/material"
|
||||
|
||||
import { Search as SearchIcon, Close as CloseIcon, Folder as FolderIcon, Code as CodeIcon, LibraryBooks as LibraryBooksIcon } from '@mui/icons-material'
|
||||
|
||||
import algoliasearch from 'algoliasearch/lite';
|
||||
import aa from 'search-insights'
|
||||
import { InstantSearch, Configure, connectSearchBox, connectHits, Index } from 'react-instantsearch-dom';
|
||||
//import { InstantSearch, SearchBox, Hits, connectSearchBox, connectHits, Index } from 'react-instantsearch-dom';
|
||||
|
||||
// https://www.algolia.com/doc/api-reference/widgets/search-box/react/
|
||||
const chipStyle = {
|
||||
backgroundColor: "#3d3f43", height: 30, marginRight: 5, paddingLeft: 5, paddingRight: 5, height: 28, cursor: "pointer", borderColor: "#3d3f43", color: "white",
|
||||
}
|
||||
|
||||
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
|
||||
const SearchData = props => {
|
||||
const { serverside, userdata, setModalOpen, modalOpen } = props
|
||||
|
||||
let navigate = useNavigate();
|
||||
const borderRadius = 3
|
||||
const node = useRef()
|
||||
const [searchOpen, setSearchOpen] = useState(true)
|
||||
const [value, setValue] = useState("");
|
||||
const [userTyped, setUserTyped] = useState(false)
|
||||
|
||||
if (serverside === true) {
|
||||
return null
|
||||
}
|
||||
|
||||
//if (window !== undefined && window.location !== undefined && window.location.pathname === "/search") {
|
||||
// return null
|
||||
//}
|
||||
|
||||
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
|
||||
|
||||
//if (window.location.pathname !== oldPath) {
|
||||
// setSearchOpen(false)
|
||||
// setOldPath(window.location.pathname)
|
||||
//}
|
||||
|
||||
//if (window.location.pathname === "/search") {
|
||||
// setModalOpen(true)
|
||||
//}
|
||||
// if (window.location.pathname === "/docs" || window.location.pathname === "/apps" || window.location.pathname === "/usecases" ) {
|
||||
// setModalOpen(false)
|
||||
// }
|
||||
|
||||
//useEffect(() => {
|
||||
// if (searchOpen) {
|
||||
// var tarfield = document.getElementById("shuffle_search_field")
|
||||
// tarfield.focus()
|
||||
// }
|
||||
//}, 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 });
|
||||
setSearchOpen(false)
|
||||
setModalOpen(false)
|
||||
return
|
||||
}
|
||||
};
|
||||
/*
|
||||
endAdornment: (
|
||||
<InputAdornment position="end" style={{textAlign: "right", zIndex: 5001, cursor: "pointer", width: 100, }} onMouseOver={(event) => {
|
||||
event.preventDefault()
|
||||
}}>
|
||||
<CloseIcon style={{marginRight: 5,}} onClick={() => {
|
||||
setSearchOpen(false)
|
||||
}} />
|
||||
</InputAdornment>
|
||||
),
|
||||
*/
|
||||
|
||||
return (
|
||||
<form id="search_form" noValidate type="searchbox" action="" role="search" onClick={() => {
|
||||
}}>
|
||||
<TextField
|
||||
fullWidth
|
||||
style={{ backgroundColor: theme.palette.surfaceColor, borderRadius: borderRadius, minWidth: "100%", maxWidth: "100%", }}
|
||||
InputProps={{
|
||||
style: {
|
||||
color: "white",
|
||||
fontSize: "1em",
|
||||
height: 50,
|
||||
margin: 0,
|
||||
fontSize: "0.9em",
|
||||
paddingLeft: 10,
|
||||
},
|
||||
disableUnderline: true,
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon style={{ marginLeft: 5, marginRight: 10, color: "#f86a3e", }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
endAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Typography position="end" style={{ fontSize: 18, color: "#f86a3e", marginLeft: 10, textTransform: "lowercase", width: 30 }}>
|
||||
esc
|
||||
</Typography>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
autoComplete='off'
|
||||
type="search"
|
||||
color="primary"
|
||||
placeholder="Find Public Apps, Workflows, Documentation..."
|
||||
value={currentRefinement}
|
||||
onKeyDown={keyPressHandler}
|
||||
id="shuffle_search_field"
|
||||
onClick={(event) => {
|
||||
if (!searchOpen) {
|
||||
setSearchOpen(true)
|
||||
setTimeout(() => {
|
||||
var tarfield = document.getElementById("shuffle_search_field")
|
||||
//console.log("TARFIELD: ", tarfield)
|
||||
tarfield.focus()
|
||||
}, 250)
|
||||
}
|
||||
}}
|
||||
onBlur={(event) => {
|
||||
//setTimeout(() => {
|
||||
// setSearchOpen(false)
|
||||
//}, 500)
|
||||
}}
|
||||
onChange={(event) => {
|
||||
refine(event.currentTarget.value)
|
||||
}}
|
||||
limit={5}
|
||||
/>
|
||||
{/*isSearchStalled ? 'My search is stalled' : ''*/}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
const WorkflowHits = ({ hits }) => {
|
||||
const [mouseHoverIndex, setMouseHoverIndex] = useState(0)
|
||||
|
||||
var tmp = searchOpen
|
||||
if (!searchOpen) {
|
||||
return null
|
||||
}
|
||||
|
||||
|
||||
const positionInfo = document.activeElement.getBoundingClientRect()
|
||||
const outerlistitemStyle = {
|
||||
width: "100%",
|
||||
overflowX: "hidden",
|
||||
overflowY: "hidden",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||
}
|
||||
|
||||
if (hits.length > 4) {
|
||||
hits = hits.slice(0, 4)
|
||||
}
|
||||
|
||||
var type = "workflows"
|
||||
const baseImage = <CodeIcon />
|
||||
|
||||
return (
|
||||
<Card elevation={0} style={{ marginRight: 10, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 75, boxShadows: "none", }}>
|
||||
<Typography variant="h6" style={{ margin: "10px 10px 0px 20px", }}>
|
||||
Workflows
|
||||
</Typography>
|
||||
|
||||
<List style={{ backgroundColor: theme.palette.inputColor, }}>
|
||||
{hits.length === 0 ?
|
||||
<ListItem style={outerlistitemStyle}>
|
||||
<ListItemAvatar onClick={() => console.log(hits)}>
|
||||
<Avatar>
|
||||
<FolderIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={"No workflows found."}
|
||||
secondary={"Try a broader search term"}
|
||||
/>
|
||||
</ListItem>
|
||||
:
|
||||
hits.map((hit, index) => {
|
||||
const innerlistitemStyle = {
|
||||
width: positionInfo.width + 35,
|
||||
overflowX: "hidden",
|
||||
overflowY: "hidden",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||
backgroundColor: mouseHoverIndex === index ? "#1f2023" : "inherit",
|
||||
cursor: "pointer",
|
||||
marginLeft: 5,
|
||||
marginRight: 5,
|
||||
maxHeight: 75,
|
||||
minHeight: 75,
|
||||
maxWidth: 420,
|
||||
minWidth: "100%",
|
||||
}
|
||||
|
||||
const name = hit.name === undefined ?
|
||||
hit.filename.charAt(0).toUpperCase() + hit.filename.slice(1).replaceAll("_", " ") + " - " + hit.title :
|
||||
(hit.name.charAt(0).toUpperCase() + hit.name.slice(1)).replaceAll("_", " ")
|
||||
const secondaryText = hit.description !== undefined && hit.description !== null && hit.description.length > 3 ? hit.description.slice(0, 40) + "..." : ""
|
||||
const appGroup = hit.action_references === undefined || hit.action_references === null ? [] : hit.action_references
|
||||
const avatar = baseImage
|
||||
|
||||
var parsedUrl = isCloud ? `/workflows/${hit.objectID}` : `https://shuffler.io/workflows/${hit.objectID}`
|
||||
|
||||
parsedUrl += `?queryID=${hit.__queryID}`
|
||||
|
||||
// <a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}>
|
||||
return (
|
||||
<Link key={hit.objectID} to={parsedUrl} rel="noopener noreferrer" style={{ textDecoration: "none", color: "white", }} onClick={(event) => {
|
||||
//console.log("CLICK")
|
||||
setSearchOpen(true)
|
||||
|
||||
aa('init', {
|
||||
appId: searchClient.appId,
|
||||
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
|
||||
})
|
||||
|
||||
const timestamp = new Date().getTime()
|
||||
aa('sendEvents', [
|
||||
{
|
||||
eventType: 'click',
|
||||
eventName: 'Workflow Clicked',
|
||||
index: 'workflows',
|
||||
objectIDs: [hit.objectID],
|
||||
timestamp: timestamp,
|
||||
queryID: hit.__queryID,
|
||||
positions: [hit.__position],
|
||||
userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
|
||||
}
|
||||
])
|
||||
|
||||
if (!isCloud) {
|
||||
event.preventDefault()
|
||||
window.open(parsedUrl, '_blank');
|
||||
}
|
||||
setModalOpen(false)
|
||||
}}>
|
||||
<ListItem key={hit.objectID} style={innerlistitemStyle} onMouseOver={() => {
|
||||
setMouseHoverIndex(index)
|
||||
}}>
|
||||
<ListItemAvatar>
|
||||
{avatar}
|
||||
</ListItemAvatar>
|
||||
<div style={{}}>
|
||||
<ListItemText
|
||||
primary={name}
|
||||
/>
|
||||
<AvatarGroup max={10} style={{ flexDirection: "row", padding: 0, margin: 0, itemAlign: "left", textAlign: "left", }}>
|
||||
{appGroup.map((app, index) => {
|
||||
// Putting all this in secondary of ListItemText looked weird.
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
height: 24,
|
||||
width: 24,
|
||||
filter: "brightness(0.6)",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/apps/" + app.id)
|
||||
}}
|
||||
>
|
||||
<Tooltip color="primary" title={app.name} placement="bottom">
|
||||
<Avatar alt={app.name} src={app.image_url} style={{ width: 24, height: 24 }} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</AvatarGroup>
|
||||
</div>
|
||||
{/*
|
||||
<ListItemSecondaryAction>
|
||||
<IconButton edge="end" aria-label="delete">
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</ListItemSecondaryAction>
|
||||
*/}
|
||||
</ListItem>
|
||||
</Link>
|
||||
)
|
||||
})
|
||||
}
|
||||
</List>
|
||||
{/*
|
||||
<span style={{display: "flex", textAlign: "left", float: "left", position: "absolute", left: 15, bottom: 10, }}>
|
||||
<Link to="/search" style={{textDecoration: "none", color: "#f85a3e"}}>
|
||||
<Typography variant="body2" style={{}}>
|
||||
See all workflows
|
||||
</Typography>
|
||||
</Link>
|
||||
</span>
|
||||
*/}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const AppHits = ({ hits }) => {
|
||||
const [mouseHoverIndex, setMouseHoverIndex] = useState(0)
|
||||
|
||||
var tmp = searchOpen
|
||||
if (!searchOpen) {
|
||||
return null
|
||||
}
|
||||
|
||||
const positionInfo = document.activeElement.getBoundingClientRect()
|
||||
const outerlistitemStyle = {
|
||||
width: "100%",
|
||||
overflowX: "hidden",
|
||||
overflowY: "hidden",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||
}
|
||||
|
||||
if (hits.length > 4) {
|
||||
hits = hits.slice(0, 4)
|
||||
}
|
||||
|
||||
var type = "app"
|
||||
const baseImage = <LibraryBooksIcon />
|
||||
|
||||
return (
|
||||
<Card elevation={0} style={{ marginRight: 10, color: "white", zIndex: 1001, backgroundColor: theme.palette.inputColor, width: "100%", left: -30, boxShadows: "none", }}>
|
||||
{/* <IconButton style={{ zIndex: 5000, position: "absolute", right: 14, color: "grey" }} onClick={() => {
|
||||
setSearchOpen(false)
|
||||
}}>
|
||||
<CloseIcon />
|
||||
</IconButton> */}
|
||||
<Typography variant="h6" style={{ margin: "10px 10px 0px 20px", }}>
|
||||
Apps
|
||||
</Typography>
|
||||
|
||||
<List style={{ backgroundColor: theme.palette.inputColor, }}>
|
||||
{hits.length === 0 ?
|
||||
<ListItem style={outerlistitemStyle}>
|
||||
<ListItemAvatar onClick={() => console.log(hits)}>
|
||||
<Avatar>
|
||||
<FolderIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={"No apps found."}
|
||||
secondary={"Try a broader search term"}
|
||||
/>
|
||||
</ListItem>
|
||||
:
|
||||
hits.map((hit, index) => {
|
||||
const innerlistitemStyle = {
|
||||
width: positionInfo.width + 35,
|
||||
overflowX: "hidden",
|
||||
overflowY: "hidden",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||
backgroundColor: mouseHoverIndex === index ? "#1f2023" : "inherit",
|
||||
cursor: "pointer",
|
||||
marginLeft: 5,
|
||||
marginRight: 5,
|
||||
maxHeight: 75,
|
||||
minHeight: 75,
|
||||
maxWidth: 420,
|
||||
minWidth: "100%",
|
||||
}
|
||||
|
||||
const name = hit.name === undefined ?
|
||||
hit.filename.charAt(0).toUpperCase() + hit.filename.slice(1).replaceAll("_", " ") + " - " + hit.title :
|
||||
(hit.name.charAt(0).toUpperCase() + hit.name.slice(1)).replaceAll("_", " ")
|
||||
|
||||
var secondaryText = hit.data !== undefined ? hit.data.slice(0, 40) + "..." : ""
|
||||
const avatar = hit.image_url === undefined ?
|
||||
baseImage
|
||||
:
|
||||
<Avatar
|
||||
src={hit.image_url}
|
||||
variant="rounded"
|
||||
/>
|
||||
|
||||
//console.log(hit)
|
||||
if (hit.categories !== undefined && hit.categories !== null && hit.categories.length > 0) {
|
||||
secondaryText = hit.categories.slice(0, 3).map((data, index) => {
|
||||
if (index === 0) {
|
||||
return data
|
||||
}
|
||||
|
||||
return ", " + data
|
||||
|
||||
/*
|
||||
<Chip
|
||||
key={index}
|
||||
style={chipStyle}
|
||||
label={data}
|
||||
onClick={() => {
|
||||
//handleChipClick
|
||||
}}
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
/>
|
||||
*/
|
||||
})
|
||||
}
|
||||
|
||||
var parsedUrl = isCloud ? `/apps/${hit.objectID}` : `https://shuffler.io/apps/${hit.objectID}`
|
||||
parsedUrl += `?queryID=${hit.__queryID}`
|
||||
|
||||
return (
|
||||
<Link key={hit.objectID} to={parsedUrl} style={{ textDecoration: "none", color: "white", }} onClick={(event) => {
|
||||
console.log("CLICK")
|
||||
setSearchOpen(true)
|
||||
setModalOpen(false)
|
||||
|
||||
aa('init', {
|
||||
appId: searchClient.appId,
|
||||
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
|
||||
})
|
||||
|
||||
const timestamp = new Date().getTime()
|
||||
aa('sendEvents', [
|
||||
{
|
||||
eventType: 'click',
|
||||
eventName: 'App Clicked',
|
||||
index: 'appsearch',
|
||||
objectIDs: [hit.objectID],
|
||||
timestamp: timestamp,
|
||||
queryID: hit.__queryID,
|
||||
positions: [hit.__position],
|
||||
userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
|
||||
}
|
||||
])
|
||||
|
||||
if (!isCloud) {
|
||||
event.preventDefault()
|
||||
window.open(parsedUrl, '_blank');
|
||||
}
|
||||
}}>
|
||||
<ListItem key={hit.objectID} style={innerlistitemStyle} onMouseOver={() => {
|
||||
setMouseHoverIndex(index)
|
||||
}}>
|
||||
<ListItemAvatar>
|
||||
{avatar}
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={name}
|
||||
secondary={secondaryText}
|
||||
/>
|
||||
{/*
|
||||
<ListItemSecondaryAction>
|
||||
<IconButton edge="end" aria-label="delete">
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</ListItemSecondaryAction>
|
||||
*/}
|
||||
</ListItem>
|
||||
</Link>
|
||||
)
|
||||
})
|
||||
}
|
||||
</List>
|
||||
{/* <span style={{ display: "flex", textAlign: "left", float: "left", position: "absolute", left: 15, bottom: 10, }}>
|
||||
<Link to="/search" style={{ textDecoration: "none", color: "#f85a3e" }}>
|
||||
<Typography variant="body1" style={{}}>
|
||||
See more
|
||||
</Typography>
|
||||
</Link>
|
||||
</span> */}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const DocHits = ({ hits }) => {
|
||||
const [mouseHoverIndex, setMouseHoverIndex] = useState(0)
|
||||
|
||||
var tmp = searchOpen
|
||||
if (!searchOpen) {
|
||||
return null
|
||||
}
|
||||
|
||||
|
||||
const positionInfo = document.activeElement.getBoundingClientRect()
|
||||
const outerlistitemStyle = {
|
||||
width: "100%",
|
||||
overflowX: "hidden",
|
||||
overflowY: "hidden",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||
}
|
||||
|
||||
if (hits.length > 4) {
|
||||
hits = hits.slice(0, 4)
|
||||
}
|
||||
|
||||
const type = "documentation"
|
||||
const baseImage = <LibraryBooksIcon />
|
||||
|
||||
//console.log(type, hits.length, hits)
|
||||
|
||||
return (
|
||||
<Card elevation={0} style={{ marginRight: 10, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 470, boxShadows: "none", }}>
|
||||
{/* <IconButton style={{ zIndex: 5000, position: "absolute", right: 14, color: "grey" }} onClick={() => {
|
||||
setSearchOpen(false)
|
||||
}}>
|
||||
<CloseIcon />
|
||||
</IconButton> */}
|
||||
<Typography variant="h6" style={{ margin: "10px 10px 0px 20px", }}>
|
||||
Documentation
|
||||
</Typography>
|
||||
{/*
|
||||
<IconButton edge="end" aria-label="delete" style={{position: "absolute", top: 5, right: 15,}} onClick={() => {
|
||||
setSearchOpen(false)
|
||||
}}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
*/}
|
||||
<List style={{ backgroundColor: theme.palette.inputColor, }}>
|
||||
{hits.length === 0 ?
|
||||
<ListItem style={outerlistitemStyle}>
|
||||
<ListItemAvatar onClick={() => console.log(hits)}>
|
||||
<Avatar>
|
||||
<FolderIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={"No documentation."}
|
||||
secondary={"Try a broader search term"}
|
||||
/>
|
||||
</ListItem>
|
||||
:
|
||||
hits.map((hit, index) => {
|
||||
const innerlistitemStyle = {
|
||||
width: positionInfo.width + 35,
|
||||
overflowX: "hidden",
|
||||
overflowY: "hidden",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||
backgroundColor: mouseHoverIndex === index ? "#1f2023" : "inherit",
|
||||
cursor: "pointer",
|
||||
marginLeft: 5,
|
||||
marginRight: 5,
|
||||
maxHeight: 75,
|
||||
minHeight: 75,
|
||||
maxWidth: 420,
|
||||
minWidth: "100%",
|
||||
}
|
||||
|
||||
var name = hit.name === undefined ?
|
||||
hit.filename.charAt(0).toUpperCase() + hit.filename.slice(1).replaceAll("_", " ") + " - " + hit.title
|
||||
:
|
||||
(hit.name.charAt(0).toUpperCase() + hit.name.slice(1)).replaceAll("_", " ")
|
||||
|
||||
if (name.length > 30) {
|
||||
name = name.slice(0, 30) + "..."
|
||||
}
|
||||
const secondaryText = hit.data !== undefined ? hit.data.slice(0, 40) + "..." : ""
|
||||
const avatar = hit.image_url === undefined ?
|
||||
baseImage
|
||||
:
|
||||
<Avatar
|
||||
src={hit.image_url}
|
||||
variant="rounded"
|
||||
/>
|
||||
|
||||
var parsedUrl = hit.urlpath !== undefined ? hit.urlpath : ""
|
||||
parsedUrl += `?queryID=${hit.__queryID}`
|
||||
if (parsedUrl.includes("/apps/")) {
|
||||
const extraHash = hit.url_hash === undefined ? "" : `#${hit.url_hash}`
|
||||
|
||||
parsedUrl = `/apps/${hit.filename}`
|
||||
parsedUrl += `?tab=docs&queryID=${hit.__queryID}${extraHash}`
|
||||
}
|
||||
|
||||
return (
|
||||
<Link key={hit.objectID} to={parsedUrl} style={{ textDecoration: "none", color: "white", }} onClick={(event) => {
|
||||
aa('init', {
|
||||
appId: searchClient.appId,
|
||||
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
|
||||
})
|
||||
|
||||
const timestamp = new Date().getTime()
|
||||
aa('sendEvents', [
|
||||
{
|
||||
eventType: 'click',
|
||||
eventName: 'Document Clicked',
|
||||
index: 'documentation',
|
||||
objectIDs: [hit.objectID],
|
||||
timestamp: timestamp,
|
||||
queryID: hit.__queryID,
|
||||
positions: [hit.__position],
|
||||
userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
|
||||
}
|
||||
])
|
||||
|
||||
console.log("CLICK")
|
||||
setSearchOpen(true)
|
||||
setModalOpen(false)
|
||||
}}>
|
||||
<ListItem key={hit.objectID} style={innerlistitemStyle} onMouseOver={() => {
|
||||
setMouseHoverIndex(index)
|
||||
}}>
|
||||
<ListItemAvatar>
|
||||
{avatar}
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={name}
|
||||
secondary={secondaryText}
|
||||
/>
|
||||
{/*
|
||||
<ListItemSecondaryAction>
|
||||
<IconButton edge="end" aria-label="delete">
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</ListItemSecondaryAction>
|
||||
*/}
|
||||
</ListItem>
|
||||
</Link>
|
||||
)
|
||||
})
|
||||
}
|
||||
</List>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const CustomSearchBox = connectSearchBox(SearchBox)
|
||||
const CustomAppHits = connectHits(AppHits)
|
||||
const CustomWorkflowHits = connectHits(WorkflowHits)
|
||||
const CustomDocHits = connectHits(DocHits)
|
||||
|
||||
const modalView = (
|
||||
<div>
|
||||
<Grid container style={{ display: "contents" }}>
|
||||
<Grid item xs="auto" style={{ marginTop: 12 }}>
|
||||
<Index indexName="appsearch">
|
||||
<CustomAppHits />
|
||||
</Index>
|
||||
</Grid>
|
||||
<Grid item xs="auto" style={{ marginTop: 12 }}>
|
||||
<Index indexName="workflows">
|
||||
<CustomWorkflowHits />
|
||||
</Index>
|
||||
</Grid>
|
||||
<Grid item xs="auto" style={{ marginTop: 12 }}>
|
||||
<Index indexName="documentation">
|
||||
<CustomDocHits />
|
||||
</Index>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
)
|
||||
|
||||
const gettingStartData = (
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
// justify="space-evenly"
|
||||
>
|
||||
<Grid item xs={6} style={{ alignItems: "center", flexDirection: "row" }}>
|
||||
<List style={{ width: "100%", marginLeft: 10, color: "var(--Paragraph-text, #C8C8C8)" }}>
|
||||
<ListItem>
|
||||
<ArticleIcon style={{ marginRight: 10, display: "flex", width: 22 }} />
|
||||
<Typography variant="body1" style={{ fontSize: 16 }}>Getting Started</Typography>
|
||||
</ListItem>
|
||||
<div style={{ marginLeft: 25, }}>
|
||||
<ListItem>
|
||||
<Link onClick={() => { window.location = "/docs"; }} style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
|
||||
<Typography variant="body1" style={{ fontSize: 16, }}>Documentation</Typography>
|
||||
<KeyboardArrowRightIcon />
|
||||
</Link>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<Link to="https://github.com/Shuffle/Shuffle/blob/main/.github/install-guide.md" style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
|
||||
<Typography variant="body1" style={{ fontSize: 16, }}>Onprem Installation</Typography>
|
||||
<KeyboardArrowRightIcon />
|
||||
</Link>
|
||||
</ListItem>
|
||||
|
||||
|
||||
<ListItem>
|
||||
<Link to="/usecases" style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
|
||||
<Typography variant="body1" style={{ fontSize: 16, }}>Explore Usecases</Typography>
|
||||
<KeyboardArrowRightIcon />
|
||||
</Link>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Link to="/search?tab=workflows" style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
|
||||
<Typography variant="body1" style={{ fontSize: 16, }}>Find public workflows</Typography>
|
||||
<KeyboardArrowRightIcon />
|
||||
</Link>
|
||||
</ListItem>
|
||||
</div>
|
||||
</List>
|
||||
</Grid>
|
||||
<Grid item xs={6} style={{ alignItems: "center", flexDirection: "row", width: 22 }}>
|
||||
<List style={{ width: "100%", marginLeft: 10, color: "var(--Paragraph-text, #C8C8C8)", }}>
|
||||
<ListItem>
|
||||
<ManageSearchIcon style={{ marginRight: 10, display: "flex" }} />
|
||||
<Typography variant="body1" style={{ display: "flex", fontSize: 16 }}>Popular searches</Typography>
|
||||
</ListItem>
|
||||
<div style={{ marginLeft: 35 }}>
|
||||
<ListItem>
|
||||
<Link to="/docs/app_creation" style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
|
||||
<Typography variant="body1" style={{ fontSize: 16, }}>Create Apps</Typography>
|
||||
<KeyboardArrowRightIcon />
|
||||
</Link>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Link to="/apps" style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
|
||||
<Typography variant="body1" style={{ fontSize: 16, }}>Find Apps</Typography>
|
||||
<KeyboardArrowRightIcon />
|
||||
</Link>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Link to="/workflows" style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
|
||||
<Typography variant="body1" style={{ fontSize: 16, }}>Workflows</Typography>
|
||||
<KeyboardArrowRightIcon />
|
||||
</Link>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Link to="/creators" style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
|
||||
<Typography variant="body1" style={{ fontSize: 16, }}>Creator</Typography>
|
||||
<KeyboardArrowRightIcon />
|
||||
</Link>
|
||||
</ListItem>
|
||||
</div>
|
||||
</List>
|
||||
</Grid>
|
||||
{/* <Grid item xs={12} style={{ alignItems: "center", flexDirection: "row", width: 22 }}>
|
||||
<List style={{ width: "100%", marginLeft: 10, color: "var(--Paragraph-text, #C8C8C8)", }}>
|
||||
<ListItem>
|
||||
<ManageSearchIcon style={{ marginRight: 10, display: "flex" }} />
|
||||
<Typography variant="body1" style={{ display: "flex", fontSize: 16 }}>Popular searches</Typography>
|
||||
</ListItem>
|
||||
<div style={{ marginLeft: 35 }}>
|
||||
<ListItem>
|
||||
|
||||
<Typography variant="body1" style={{ fontSize: 16, }}>Apps</Typography>
|
||||
<KeyboardArrowRightIcon />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography variant="body1" style={{ fontSize: 16, }}>Workflows</Typography>
|
||||
<KeyboardArrowRightIcon />
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Typography variant="body1" style={{ fontSize: 16, }}>Creator</Typography>
|
||||
<KeyboardArrowRightIcon />
|
||||
</ListItem>
|
||||
</div>
|
||||
</List>
|
||||
</Grid> */}
|
||||
<Grid style={{ textAlign: "end", width: "100%", textTransform: 'capitalize', }}>
|
||||
<Button style={{ textAlign: "center", textTransform: 'capitalize' }}
|
||||
onClick={() => { window.location = "/search"; }} >
|
||||
See More
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
|
||||
return (
|
||||
<div ref={node} style={{ width: "100%", maxWidth: "100%", margin: "auto", position: "relative", }}>
|
||||
<InstantSearch searchClient={searchClient} indexName="appsearch" onClick={() => {
|
||||
console.log("CLICKED 1")
|
||||
}}>
|
||||
<Configure clickAnalytics />
|
||||
<CustomSearchBox onClick={() => {
|
||||
console.log("Click 2")
|
||||
}}/>
|
||||
{modalView}
|
||||
</InstantSearch>
|
||||
{gettingStartData}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SearchData;
|
||||
@@ -1,34 +1,42 @@
|
||||
import React, {useState, useEffect, useRef} from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
|
||||
import theme from '../theme.jsx';
|
||||
import { useNavigate, Link, useParams } from "react-router-dom";
|
||||
import SearchBox from "./SearchData.jsx";
|
||||
|
||||
import {
|
||||
Chip,
|
||||
IconButton,
|
||||
TextField,
|
||||
InputAdornment,
|
||||
List,
|
||||
Card,
|
||||
ListItem,
|
||||
ListItemAvatar,
|
||||
ListItemText,
|
||||
Avatar,
|
||||
Chip,
|
||||
IconButton,
|
||||
TextField,
|
||||
InputAdornment,
|
||||
List,
|
||||
Card,
|
||||
ListItem,
|
||||
Button,
|
||||
Dialog,
|
||||
ListItemAvatar,
|
||||
ListItemText,
|
||||
Avatar,
|
||||
Typography,
|
||||
Tooltip,
|
||||
Divider,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
} from '@mui/material';
|
||||
import Mousetrap from 'mousetrap';
|
||||
|
||||
import {
|
||||
AvatarGroup,
|
||||
AvatarGroup,
|
||||
} from "@mui/material"
|
||||
|
||||
import {Search as SearchIcon, Close as CloseIcon, Folder as FolderIcon, Code as CodeIcon, LibraryBooks as LibraryBooksIcon} from '@mui/icons-material'
|
||||
|
||||
import { Search as SearchIcon, Close as CloseIcon, Folder as FolderIcon, Code as CodeIcon, LibraryBooks as LibraryBooksIcon } from '@mui/icons-material'
|
||||
import KeyboardCommandKeyIcon from '@mui/icons-material/KeyboardCommandKey';
|
||||
import algoliasearch from 'algoliasearch/lite';
|
||||
import aa from 'search-insights'
|
||||
import { InstantSearch, Configure, connectSearchBox, connectHits, Index } from 'react-instantsearch-dom';
|
||||
//import { InstantSearch, SearchBox, Hits, connectSearchBox, connectHits, Index } from 'react-instantsearch-dom';
|
||||
|
||||
import { HotKeys } from 'react-hotkeys';
|
||||
// https://www.algolia.com/doc/api-reference/widgets/search-box/react/
|
||||
const chipStyle = {
|
||||
backgroundColor: "#3d3f43", height: 30, marginRight: 5, paddingLeft: 5, paddingRight: 5, height: 28, cursor: "pointer", borderColor: "#3d3f43", color: "white",
|
||||
@@ -36,623 +44,122 @@ const chipStyle = {
|
||||
|
||||
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
|
||||
const SearchField = props => {
|
||||
const { serverside, userdata } = props
|
||||
const { serverside, userdata, isMobile, isLoaded, globalUrl, isHeader, isLoggedIn, small, rounded } = props
|
||||
|
||||
let navigate = useNavigate();
|
||||
const borderRadius = 3
|
||||
const node = useRef()
|
||||
const [searchOpen, setSearchOpen] = useState(false)
|
||||
const [modalOpen, setModalOpen] = React.useState(false);
|
||||
const [oldPath, setOldPath] = useState("")
|
||||
const [value, setValue] = useState("");
|
||||
useEffect(() => {
|
||||
Mousetrap.bind(['command+k', 'ctrl+k'], () => {
|
||||
setModalOpen(true);
|
||||
return false; // Prevent the default action
|
||||
});
|
||||
Mousetrap.bind(['esc'], () => {
|
||||
setModalOpen(false);
|
||||
return false; // Prevent the default action
|
||||
});
|
||||
|
||||
if (serverside === true) {
|
||||
return null
|
||||
}
|
||||
|
||||
if (window !== undefined && window.location !== undefined && window.location.pathname === "/search") {
|
||||
return null
|
||||
}
|
||||
|
||||
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
|
||||
|
||||
if (window.location.pathname !== oldPath) {
|
||||
setSearchOpen(false)
|
||||
setOldPath(window.location.pathname)
|
||||
}
|
||||
|
||||
//useEffect(() => {
|
||||
// if (searchOpen) {
|
||||
// var tarfield = document.getElementById("shuffle_search_field")
|
||||
// tarfield.focus()
|
||||
// }
|
||||
//}, 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 });
|
||||
}
|
||||
return () => {
|
||||
Mousetrap.unbind(['command+k', 'ctrl+k']);
|
||||
};
|
||||
/*
|
||||
endAdornment: (
|
||||
<InputAdornment position="end" style={{textAlign: "right", zIndex: 5001, cursor: "pointer", width: 100, }} onMouseOver={(event) => {
|
||||
event.preventDefault()
|
||||
}}>
|
||||
<CloseIcon style={{marginRight: 5,}} onClick={() => {
|
||||
setSearchOpen(false)
|
||||
}} />
|
||||
</InputAdornment>
|
||||
),
|
||||
*/
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<form id="search_form" noValidate type="searchbox" action="" role="search" style={{margin: "10px 0px 0px 0px", }} onClick={() => {
|
||||
}}>
|
||||
<TextField
|
||||
fullWidth
|
||||
style={{backgroundColor: theme.palette.surfaceColor, borderRadius: borderRadius, minWidth: 403, maxWidth: 403, }}
|
||||
InputProps={{
|
||||
style:{
|
||||
color: "white",
|
||||
fontSize: "1em",
|
||||
height: 50,
|
||||
margin: 0,
|
||||
fontSize: "0.9em",
|
||||
paddingLeft: 10,
|
||||
},
|
||||
disableUnderline: true,
|
||||
endAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon style={{marginLeft: 5, color: "#f86a3e",}}/>
|
||||
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
autoComplete='off'
|
||||
type="search"
|
||||
color="primary"
|
||||
placeholder="Find Public Apps, Workflows, Documentation..."
|
||||
value={currentRefinement}
|
||||
onKeyDown={keyPressHandler}
|
||||
id="shuffle_search_field"
|
||||
onClick={(event) => {
|
||||
if (!searchOpen) {
|
||||
setSearchOpen(true)
|
||||
setTimeout(() => {
|
||||
var tarfield = document.getElementById("shuffle_search_field")
|
||||
//console.log("TARFIELD: ", tarfield)
|
||||
tarfield.focus()
|
||||
}, 100)
|
||||
}
|
||||
}}
|
||||
onBlur={(event) => {
|
||||
setTimeout(() => {
|
||||
setSearchOpen(false)
|
||||
}, 500)
|
||||
}}
|
||||
onChange={(event) => {
|
||||
//if (event.currentTarget.value.length > 0 && !searchOpen) {
|
||||
// setSearchOpen(true)
|
||||
//}
|
||||
|
||||
refine(event.currentTarget.value)
|
||||
}}
|
||||
limit={5}
|
||||
/>
|
||||
{/*isSearchStalled ? 'My search is stalled' : ''*/}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
const WorkflowHits = ({ hits }) => {
|
||||
const [mouseHoverIndex, setMouseHoverIndex] = useState(0)
|
||||
|
||||
var tmp = searchOpen
|
||||
if (!searchOpen) {
|
||||
return null
|
||||
}
|
||||
|
||||
|
||||
const positionInfo = document.activeElement.getBoundingClientRect()
|
||||
const outerlistitemStyle = {
|
||||
width: "100%",
|
||||
overflowX: "hidden",
|
||||
overflowY: "hidden",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||
}
|
||||
|
||||
if (hits.length > 4) {
|
||||
hits = hits.slice(0, 4)
|
||||
}
|
||||
|
||||
var type = "workflows"
|
||||
const baseImage = <CodeIcon />
|
||||
|
||||
return (
|
||||
<Card elevation={0} style={{position: "relative", marginLeft: 10, marginRight: 10, position: "absolute", color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: 405, height: 408, left: 75, boxShadows: "none",}}>
|
||||
<Typography variant="h6" style={{margin: "10px 10px 0px 20px", }}>
|
||||
Workflows
|
||||
</Typography>
|
||||
|
||||
<List style={{backgroundColor: theme.palette.inputColor, }}>
|
||||
{hits.length === 0 ?
|
||||
<ListItem style={outerlistitemStyle}>
|
||||
<ListItemAvatar onClick={() => console.log(hits)}>
|
||||
<Avatar>
|
||||
<FolderIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={"No workflows found."}
|
||||
secondary={"Try a broader search term"}
|
||||
/>
|
||||
</ListItem>
|
||||
:
|
||||
hits.map((hit, index) => {
|
||||
const innerlistitemStyle = {
|
||||
width: positionInfo.width+35,
|
||||
overflowX: "hidden",
|
||||
overflowY: "hidden",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||
backgroundColor: mouseHoverIndex === index ? "#1f2023" : "inherit",
|
||||
cursor: "pointer",
|
||||
marginLeft: 5,
|
||||
marginRight: 5,
|
||||
maxHeight: 75,
|
||||
minHeight: 75,
|
||||
maxWidth: 420,
|
||||
minWidth: "100%",
|
||||
}
|
||||
|
||||
const name = hit.name === undefined ?
|
||||
hit.filename.charAt(0).toUpperCase() + hit.filename.slice(1).replaceAll("_", " ") + " - " + hit.title :
|
||||
(hit.name.charAt(0).toUpperCase()+hit.name.slice(1)).replaceAll("_", " ")
|
||||
const secondaryText = hit.description !== undefined && hit.description !== null && hit.description.length > 3 ? hit.description.slice(0, 40)+"..." : ""
|
||||
const appGroup = hit.action_references === undefined || hit.action_references === null ? [] : hit.action_references
|
||||
const avatar = baseImage
|
||||
|
||||
var parsedUrl = isCloud ? `/workflows/${hit.objectID}` : `https://shuffler.io/workflows/${hit.objectID}`
|
||||
|
||||
parsedUrl += `?queryID=${hit.__queryID}`
|
||||
|
||||
// <a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}>
|
||||
return (
|
||||
<Link key={hit.objectID} to={parsedUrl} rel="noopener noreferrer" style={{textDecoration: "none", color: "white",}} onClick={(event) => {
|
||||
//console.log("CLICK")
|
||||
setSearchOpen(true)
|
||||
|
||||
aa('init', {
|
||||
appId: searchClient.appId,
|
||||
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
|
||||
})
|
||||
|
||||
const timestamp = new Date().getTime()
|
||||
aa('sendEvents', [
|
||||
{
|
||||
eventType: 'click',
|
||||
eventName: 'Workflow Clicked',
|
||||
index: 'workflows',
|
||||
objectIDs: [hit.objectID],
|
||||
timestamp: timestamp,
|
||||
queryID: hit.__queryID,
|
||||
positions: [hit.__position],
|
||||
userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
|
||||
}
|
||||
])
|
||||
|
||||
if (!isCloud) {
|
||||
event.preventDefault()
|
||||
window.open(parsedUrl, '_blank');
|
||||
}
|
||||
}}>
|
||||
<ListItem key={hit.objectID} style={innerlistitemStyle} onMouseOver={() => {
|
||||
setMouseHoverIndex(index)
|
||||
}}>
|
||||
<ListItemAvatar>
|
||||
{avatar}
|
||||
</ListItemAvatar>
|
||||
<div style={{}}>
|
||||
<ListItemText
|
||||
primary={name}
|
||||
/>
|
||||
<AvatarGroup max={10} style={{flexDirection: "row", padding: 0, margin: 0, itemAlign: "left", textAlign: "left",}}>
|
||||
{appGroup.map((app, index) => {
|
||||
// Putting all this in secondary of ListItemText looked weird.
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
height: 24,
|
||||
width: 24,
|
||||
filter: "brightness(0.6)",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/apps/"+app.id)
|
||||
}}
|
||||
>
|
||||
<Tooltip color="primary" title={app.name} placement="bottom">
|
||||
<Avatar alt={app.name} src={app.image_url} style={{width: 24, height: 24}}/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</AvatarGroup>
|
||||
</div>
|
||||
{/*
|
||||
<ListItemSecondaryAction>
|
||||
<IconButton edge="end" aria-label="delete">
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</ListItemSecondaryAction>
|
||||
*/}
|
||||
</ListItem>
|
||||
</Link>
|
||||
)})
|
||||
}
|
||||
</List>
|
||||
{/*
|
||||
<span style={{display: "flex", textAlign: "left", float: "left", position: "absolute", left: 15, bottom: 10, }}>
|
||||
<Link to="/search" style={{textDecoration: "none", color: "#f85a3e"}}>
|
||||
<Typography variant="body2" style={{}}>
|
||||
See all workflows
|
||||
</Typography>
|
||||
</Link>
|
||||
</span>
|
||||
*/}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const AppHits = ({ hits }) => {
|
||||
const [mouseHoverIndex, setMouseHoverIndex] = useState(0)
|
||||
|
||||
var tmp = searchOpen
|
||||
if (!searchOpen) {
|
||||
return null
|
||||
}
|
||||
|
||||
const positionInfo = document.activeElement.getBoundingClientRect()
|
||||
const outerlistitemStyle = {
|
||||
width: "100%",
|
||||
overflowX: "hidden",
|
||||
overflowY: "hidden",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||
}
|
||||
|
||||
if (hits.length > 4) {
|
||||
hits = hits.slice(0, 4)
|
||||
}
|
||||
|
||||
var type = "app"
|
||||
const baseImage = <LibraryBooksIcon />
|
||||
|
||||
return (
|
||||
<Card elevation={0} style={{position: "relative", marginLeft: 10, marginRight: 10, position: "absolute", color: "white", zIndex: 1001, backgroundColor: theme.palette.inputColor, width: 1155, height: 408, left: -305, boxShadows: "none",}}>
|
||||
<IconButton style={{zIndex: 5000, position: "absolute", right: 14, color: "grey"}} onClick={() => {
|
||||
setSearchOpen(false)
|
||||
}}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" style={{margin: "10px 10px 0px 20px", }}>
|
||||
Apps
|
||||
</Typography>
|
||||
|
||||
<List style={{backgroundColor: theme.palette.inputColor, }}>
|
||||
{hits.length === 0 ?
|
||||
<ListItem style={outerlistitemStyle}>
|
||||
<ListItemAvatar onClick={() => console.log(hits)}>
|
||||
<Avatar>
|
||||
<FolderIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={"No apps found."}
|
||||
secondary={"Try a broader search term"}
|
||||
/>
|
||||
</ListItem>
|
||||
:
|
||||
hits.map((hit, index) => {
|
||||
const innerlistitemStyle = {
|
||||
width: positionInfo.width+35,
|
||||
overflowX: "hidden",
|
||||
overflowY: "hidden",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||
backgroundColor: mouseHoverIndex === index ? "#1f2023" : "inherit",
|
||||
cursor: "pointer",
|
||||
marginLeft: 5,
|
||||
marginRight: 5,
|
||||
maxHeight: 75,
|
||||
minHeight: 75,
|
||||
maxWidth: 420,
|
||||
minWidth: "100%",
|
||||
}
|
||||
|
||||
const name = hit.name === undefined ?
|
||||
hit.filename.charAt(0).toUpperCase() + hit.filename.slice(1).replaceAll("_", " ") + " - " + hit.title :
|
||||
(hit.name.charAt(0).toUpperCase()+hit.name.slice(1)).replaceAll("_", " ")
|
||||
|
||||
var secondaryText = hit.data !== undefined ? hit.data.slice(0, 40)+"..." : ""
|
||||
const avatar = hit.image_url === undefined ?
|
||||
baseImage
|
||||
:
|
||||
<Avatar
|
||||
src={hit.image_url}
|
||||
variant="rounded"
|
||||
/>
|
||||
|
||||
//console.log(hit)
|
||||
if (hit.categories !== undefined && hit.categories !== null && hit.categories.length > 0) {
|
||||
secondaryText = hit.categories.slice(0,3).map((data, index) => {
|
||||
if (index === 0) {
|
||||
return data
|
||||
}
|
||||
|
||||
return ", "+data
|
||||
|
||||
/*
|
||||
<Chip
|
||||
key={index}
|
||||
style={chipStyle}
|
||||
label={data}
|
||||
onClick={() => {
|
||||
//handleChipClick
|
||||
}}
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
/>
|
||||
*/
|
||||
})
|
||||
}
|
||||
|
||||
var parsedUrl = isCloud ? `/apps/${hit.objectID}` : `https://shuffler.io/apps/${hit.objectID}`
|
||||
parsedUrl += `?queryID=${hit.__queryID}`
|
||||
|
||||
return (
|
||||
<Link key={hit.objectID} to={parsedUrl} style={{textDecoration: "none", color: "white",}} onClick={(event) => {
|
||||
console.log("CLICK")
|
||||
setSearchOpen(true)
|
||||
|
||||
aa('init', {
|
||||
appId: searchClient.appId,
|
||||
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
|
||||
})
|
||||
|
||||
const timestamp = new Date().getTime()
|
||||
aa('sendEvents', [
|
||||
{
|
||||
eventType: 'click',
|
||||
eventName: 'App Clicked',
|
||||
index: 'appsearch',
|
||||
objectIDs: [hit.objectID],
|
||||
timestamp: timestamp,
|
||||
queryID: hit.__queryID,
|
||||
positions: [hit.__position],
|
||||
userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
|
||||
}
|
||||
])
|
||||
|
||||
if (!isCloud) {
|
||||
event.preventDefault()
|
||||
window.open(parsedUrl, '_blank');
|
||||
}
|
||||
}}>
|
||||
<ListItem key={hit.objectID} style={innerlistitemStyle} onMouseOver={() => {
|
||||
setMouseHoverIndex(index)
|
||||
}}>
|
||||
<ListItemAvatar>
|
||||
{avatar}
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={name}
|
||||
secondary={secondaryText}
|
||||
/>
|
||||
{/*
|
||||
<ListItemSecondaryAction>
|
||||
<IconButton edge="end" aria-label="delete">
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</ListItemSecondaryAction>
|
||||
*/}
|
||||
</ListItem>
|
||||
</Link>
|
||||
)})
|
||||
}
|
||||
</List>
|
||||
<span style={{display: "flex", textAlign: "left", float: "left", position: "absolute", left: 15, bottom: 10, }}>
|
||||
<Link to="/search" style={{textDecoration: "none", color: "#f85a3e"}}>
|
||||
<Typography variant="body1" style={{}}>
|
||||
See more
|
||||
</Typography>
|
||||
</Link>
|
||||
</span>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const DocHits = ({ hits }) => {
|
||||
const [mouseHoverIndex, setMouseHoverIndex] = useState(0)
|
||||
|
||||
var tmp = searchOpen
|
||||
if (!searchOpen) {
|
||||
return null
|
||||
}
|
||||
|
||||
|
||||
const positionInfo = document.activeElement.getBoundingClientRect()
|
||||
const outerlistitemStyle = {
|
||||
width: "100%",
|
||||
overflowX: "hidden",
|
||||
overflowY: "hidden",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||
}
|
||||
|
||||
if (hits.length > 4) {
|
||||
hits = hits.slice(0, 4)
|
||||
}
|
||||
|
||||
const type = "documentation"
|
||||
const baseImage = <LibraryBooksIcon />
|
||||
|
||||
//console.log(type, hits.length, hits)
|
||||
|
||||
return (
|
||||
<Card elevation={0} style={{position: "relative", marginLeft: 10, marginRight: 10, position: "absolute", color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: 405, height: 408, left: 470, boxShadows: "none",}}>
|
||||
<IconButton style={{zIndex: 5000, position: "absolute", right: 14, color: "grey"}} onClick={() => {
|
||||
setSearchOpen(false)
|
||||
}}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" style={{margin: "10px 10px 0px 20px", }}>
|
||||
Documentation
|
||||
</Typography>
|
||||
{/*
|
||||
<IconButton edge="end" aria-label="delete" style={{position: "absolute", top: 5, right: 15,}} onClick={() => {
|
||||
setSearchOpen(false)
|
||||
}}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
*/}
|
||||
<List style={{backgroundColor: theme.palette.inputColor, }}>
|
||||
{hits.length === 0 ?
|
||||
<ListItem style={outerlistitemStyle}>
|
||||
<ListItemAvatar onClick={() => console.log(hits)}>
|
||||
<Avatar>
|
||||
<FolderIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={"No documentation."}
|
||||
secondary={"Try a broader search term"}
|
||||
/>
|
||||
</ListItem>
|
||||
:
|
||||
hits.map((hit, index) => {
|
||||
const innerlistitemStyle = {
|
||||
width: positionInfo.width+35,
|
||||
overflowX: "hidden",
|
||||
overflowY: "hidden",
|
||||
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||
backgroundColor: mouseHoverIndex === index ? "#1f2023" : "inherit",
|
||||
cursor: "pointer",
|
||||
marginLeft: 5,
|
||||
marginRight: 5,
|
||||
maxHeight: 75,
|
||||
minHeight: 75,
|
||||
maxWidth: 420,
|
||||
minWidth: "100%",
|
||||
}
|
||||
|
||||
var name = hit.name === undefined ?
|
||||
hit.filename.charAt(0).toUpperCase() + hit.filename.slice(1).replaceAll("_", " ") + " - " + hit.title
|
||||
:
|
||||
(hit.name.charAt(0).toUpperCase()+hit.name.slice(1)).replaceAll("_", " ")
|
||||
|
||||
if (name.length > 30) {
|
||||
name = name.slice(0, 30)+"..."
|
||||
}
|
||||
const secondaryText = hit.data !== undefined ? hit.data.slice(0, 40)+"..." : ""
|
||||
const avatar = hit.image_url === undefined ?
|
||||
baseImage
|
||||
:
|
||||
<Avatar
|
||||
src={hit.image_url}
|
||||
variant="rounded"
|
||||
/>
|
||||
|
||||
var parsedUrl = hit.urlpath !== undefined ? hit.urlpath : ""
|
||||
parsedUrl += `?queryID=${hit.__queryID}`
|
||||
if (parsedUrl.includes("/apps/")) {
|
||||
const extraHash = hit.url_hash === undefined ? "" : `#${hit.url_hash}`
|
||||
|
||||
parsedUrl = `/apps/${hit.filename}`
|
||||
parsedUrl += `?tab=docs&queryID=${hit.__queryID}${extraHash}`
|
||||
}
|
||||
|
||||
return (
|
||||
<Link key={hit.objectID} to={parsedUrl} style={{textDecoration: "none", color: "white",}} onClick={(event) => {
|
||||
aa('init', {
|
||||
appId: searchClient.appId,
|
||||
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
|
||||
})
|
||||
|
||||
const timestamp = new Date().getTime()
|
||||
aa('sendEvents', [
|
||||
{
|
||||
eventType: 'click',
|
||||
eventName: 'Document Clicked',
|
||||
index: 'documentation',
|
||||
objectIDs: [hit.objectID],
|
||||
timestamp: timestamp,
|
||||
queryID: hit.__queryID,
|
||||
positions: [hit.__position],
|
||||
userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
|
||||
}
|
||||
])
|
||||
|
||||
console.log("CLICK")
|
||||
setSearchOpen(true)
|
||||
}}>
|
||||
<ListItem key={hit.objectID} style={innerlistitemStyle} onMouseOver={() => {
|
||||
setMouseHoverIndex(index)
|
||||
}}>
|
||||
<ListItemAvatar>
|
||||
{avatar}
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={name}
|
||||
secondary={secondaryText}
|
||||
/>
|
||||
{/*
|
||||
<ListItemSecondaryAction>
|
||||
<IconButton edge="end" aria-label="delete">
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</ListItemSecondaryAction>
|
||||
*/}
|
||||
</ListItem>
|
||||
</Link>
|
||||
)})
|
||||
}
|
||||
</List>
|
||||
{type === "documentation" ?
|
||||
<span style={{display: "flex", textAlign: "right", position: "absolute", right: 15, bottom: 10,}}>
|
||||
<Typography variant="body2" style={{}}>
|
||||
Search by
|
||||
</Typography>
|
||||
<a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}>
|
||||
<img src={"/images/logo-algolia-nebula-blue-full.svg"} alt="Algolia logo" style={{height: 17, marginLeft: 5, marginTop: 3,}} />
|
||||
</a>
|
||||
</span>
|
||||
const fieldWidth = small === true ? 120 : 310
|
||||
const modalView = (
|
||||
// console.log("key:", dataValue.key),
|
||||
//console.log("value:",dataValue.value),
|
||||
<Dialog
|
||||
open={modalOpen}
|
||||
onClose={() => {
|
||||
setModalOpen(false);
|
||||
}}
|
||||
PaperProps={{
|
||||
style: {
|
||||
color: "white",
|
||||
minWidth: 750,
|
||||
height: 785,
|
||||
borderRadius: 16,
|
||||
border: "1px solid var(--Container-Stroke, #494949)",
|
||||
background: "var(--Container, #000000)",
|
||||
boxShadow: "0px 16px 24px 8px rgba(0, 0, 0, 0.25)",
|
||||
zIndex: 13000,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{isHeader ? <div style={{ display: "flex" }}>
|
||||
<DialogTitle style={{ marginTop: 15, marginLeft: 5, color: "var(--Paragraph-text, #C8C8C8)" }} >Search Shuffle</DialogTitle>
|
||||
<Button fullWidth style={{ marginLeft: 470 }} onClick={() => {
|
||||
setModalOpen(false);
|
||||
}}><CloseIcon /></Button>
|
||||
</div>
|
||||
: null}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
const CustomSearchBox = connectSearchBox(SearchBox)
|
||||
const CustomAppHits = connectHits(AppHits)
|
||||
const CustomWorkflowHits = connectHits(WorkflowHits)
|
||||
const CustomDocHits = connectHits(DocHits)
|
||||
<DialogContent style={{}}>
|
||||
<SearchBox setModalOpen={setModalOpen} modalOpen={modalOpen} serverside={serverside} userdata={userdata} />
|
||||
</DialogContent>
|
||||
<Divider style={{overflow: "hidden"}}/>
|
||||
<span style={{display:"flex", width:"100%"}}>
|
||||
<div style={{display: "flex", marginTop: 6, marginBottom: 6, marginRight: 100, marginLeft: 20, alignItems: "center"}}>
|
||||
{/* <Typography variant="body2" style={{ fontSize: 16, fontWidth: 550, color: "var(--Paragraph-text, #C8C8C8)"}}>
|
||||
Discord
|
||||
</Typography> */}
|
||||
{/*
|
||||
<a rel="noopener noreferrer" href="https://discord.com/invite/B2CBzUm" target="_blank" style={{ textDecoration: "none", color: "white" }}>
|
||||
<img src={"/images/social/discode.svg"} alt="Algolia logo" style={{ height: 22, marginLeft: 5, marginTop: 3, }} />
|
||||
</a>
|
||||
</div>
|
||||
<div style={{ display: "flex", marginTop: 6, marginBottom: 6, marginLeft: 440 }}>
|
||||
<Typography variant="body2" style={{color: "var(--Paragraph-text, #C8C8C8)"}}>
|
||||
Search by
|
||||
</Typography>
|
||||
<a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{ textDecoration: "none", color: "white" }}>
|
||||
<img src={"/images/logo-algolia-nebula-blue-full.svg"} alt="Algolia logo" style={{ height: 17, marginLeft: 5, marginTop: 3, }} />
|
||||
</a>
|
||||
*/}
|
||||
</div>
|
||||
</span>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={node} style={{width: "100%", maxWidth: 425, margin: "auto", position: "relative", }}>
|
||||
<InstantSearch searchClient={searchClient} indexName="appsearch" onClick={() => {
|
||||
console.log("CLICKED")
|
||||
}}>
|
||||
<Configure clickAnalytics />
|
||||
<CustomSearchBox />
|
||||
<Index indexName="appsearch">
|
||||
<CustomAppHits />
|
||||
</Index>
|
||||
<Index indexName="documentation">
|
||||
<CustomDocHits />
|
||||
</Index>
|
||||
<Index indexName="workflows">
|
||||
<CustomWorkflowHits />
|
||||
</Index>
|
||||
</InstantSearch>
|
||||
<div style={{ marginTop: "auto", marginLeft: !isLoggedIn ? 0 : 130 }}>
|
||||
{modalView}
|
||||
<TextField
|
||||
style={{ backgroundColor: "#212121", height: 48, borderRadius: rounded === true ? 25 : theme.palette.borderRadius, minWidth: fieldWidth, maxWidth: fieldWidth, }}
|
||||
InputProps={{
|
||||
style: {
|
||||
color: "white",
|
||||
fontSize: "1em",
|
||||
height: 50,
|
||||
margin: 7,
|
||||
fontSize: "0.9em",
|
||||
},
|
||||
readOnly: true,
|
||||
disableUnderline: true,
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon style={{ color: "#f86a3e", }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
endAdornment: (
|
||||
<Button position="end" style={{ marginLeft: 10, width: 15 }}>
|
||||
<KeyboardCommandKeyIcon style={{ width: 15 }} />
|
||||
+ K
|
||||
</Button>
|
||||
)
|
||||
}}
|
||||
variant="standard"
|
||||
autoComplete='off'
|
||||
color="primary"
|
||||
placeholder="Search Apps, Workflows, Docs..."
|
||||
onClick={(event) => {
|
||||
setModalOpen(true)
|
||||
}}
|
||||
limit={5}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -22,6 +22,7 @@ import {
|
||||
Check as CheckIcon,
|
||||
TrendingFlat as TrendingFlatIcon,
|
||||
Close as CloseIcon,
|
||||
East as EastIcon,
|
||||
} from '@mui/icons-material';
|
||||
|
||||
import WorkflowTemplatePopup2 from "./WorkflowTemplatePopup.jsx";
|
||||
@@ -36,6 +37,7 @@ const WorkflowTemplatePopup = (props) => {
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
const [workflowLoading, setWorkflowLoading] = useState(false);
|
||||
const [workflow, setWorkflow] = useState({});
|
||||
const [showLoginButton, setShowLoginButton] = useState(false);
|
||||
const [appAuthentication, setAppAuthentication] = React.useState(undefined);
|
||||
|
||||
const [missingSource, setMissingSource] = React.useState(undefined)
|
||||
@@ -119,7 +121,8 @@ const WorkflowTemplatePopup = (props) => {
|
||||
const loadAppAuth = () => {
|
||||
// Check if it exists, and has keys
|
||||
if (userdata === undefined || userdata === null || Object.keys(userdata).length === 0) {
|
||||
setErrorMessage("You need to be logged in to try usecases. Redirecting in 5 seconds...")
|
||||
setErrorMessage("You need to be logged in to try the pre-built Workflow Templates.")
|
||||
setShowLoginButton(true)
|
||||
|
||||
// Send the user to the login screen after 3 seconds
|
||||
setTimeout(() => {
|
||||
@@ -350,12 +353,35 @@ const WorkflowTemplatePopup = (props) => {
|
||||
<Typography variant="h6" style={{marginTop: 75, }}>
|
||||
{errorMessage !== "" ? errorMessage : ""}
|
||||
</Typography>
|
||||
{showLoginButton ?
|
||||
<Link to="/register?message=Please login to create workflows&view=usecases"
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
marginBottom: 50,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 18,
|
||||
color: "rgba(255, 132, 68, 1)",
|
||||
marginTop: 32,
|
||||
justifyContent: isMobile ? "center" : null,
|
||||
fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)",
|
||||
fontWeight: 550,
|
||||
}}
|
||||
>
|
||||
Sign up
|
||||
<EastIcon style={{ marginTop: 3, marginLeft: 7 }} />
|
||||
</Typography>
|
||||
</Link>
|
||||
: null}
|
||||
</div>
|
||||
}
|
||||
|
||||
{isLoggedIn && (missingSource !== undefined || missingDestination !== undefined) ?
|
||||
<Typography variant="body1" style={{marginTop: 75, }}>
|
||||
{"The following app category is required generate this workflow: "}
|
||||
{(missingSource !== undefined || missingDestination !== undefined) ?
|
||||
<Typography variant="body1" style={{marginTop: 75, marginBottom: 10, }}>
|
||||
{"Find relevevant Apps for this Usecase"}
|
||||
</Typography>
|
||||
: null}
|
||||
|
||||
@@ -502,7 +528,7 @@ const WorkflowTemplatePopup = (props) => {
|
||||
<Typography variant="body1" style={{ marginTop: parsedDescription.length === 0 ? 10 : 0, fontSize: isMobile ? 13 : 16,fontWeight: isHomePage? 600 : null,textTransform: 'capitalize', color: isHomePage ? "var(--White-text, #F1F1F1)" :"rgba(241, 241, 241, 1)"}} >
|
||||
{parsedTitle}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="textSecondary" style={{ fontSize: isMobile ? 10: 16, fontWeight: isHomePage ? 400 : null, textTransform: 'capitalize', marginTop: 0, overflow: "hidden",}} color="rgba(158, 158, 158, 1)">
|
||||
<Typography variant="body2" color="textSecondary" style={{ fontSize: isMobile ? 10: 16, fontWeight: isHomePage ? 400 : null, textTransform: 'capitalize', marginTop: 0, overflow: "hidden", maxHeight: 21, overflow: "hidden",}} color="rgba(158, 158, 158, 1)">
|
||||
{parsedDescription}
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
@@ -291,8 +291,6 @@ const Admin = (props) => {
|
||||
//const alert = useAlert();
|
||||
const handleStatusChange = (event) => {
|
||||
const { value } = event.target;
|
||||
console.log("value: ", value)
|
||||
|
||||
setSelectedStatus(value);
|
||||
|
||||
|
||||
@@ -331,7 +329,7 @@ const Admin = (props) => {
|
||||
var your_apps = "- Connecting "
|
||||
|
||||
var subject_add = 0
|
||||
var subject = "Want to automate "
|
||||
var subject = "POC to automate "
|
||||
|
||||
if (org.security_framework !== undefined && org.security_framework !== null) {
|
||||
if (org.security_framework.cases.name !== undefined && org.security_framework.cases.name !== null && org.security_framework.cases.name !== "") {
|
||||
@@ -400,7 +398,7 @@ const Admin = (props) => {
|
||||
|
||||
|
||||
// Remove comma
|
||||
subject += "?"
|
||||
//subject += "?"
|
||||
your_apps = your_apps.substring(0, your_apps.length - 2)
|
||||
}
|
||||
|
||||
@@ -432,12 +430,25 @@ const Admin = (props) => {
|
||||
var admins = ""
|
||||
|
||||
// Loop users
|
||||
var lastLogin = 0
|
||||
for (var i = 0; i < users.length; i++) {
|
||||
if (users[i].username.includes("shuffler")) {
|
||||
continue
|
||||
}
|
||||
|
||||
if (users[i].role === "admin") {
|
||||
admins += users[i].username + ","
|
||||
}
|
||||
|
||||
const data = users[i]
|
||||
for (var i = 0; i < data.login_info.length; i++) {
|
||||
if (data.login_info[i].timestamp > lastLogin) {
|
||||
lastLogin = data.login_info[i].timestamp
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Remove last comma
|
||||
admins = admins.substring(0, admins.length - 1)
|
||||
|
||||
@@ -452,15 +463,24 @@ const Admin = (props) => {
|
||||
// Get drift username from userdata.username before @ in email
|
||||
const username = userdata.username.substring(0, userdata.username.indexOf("@"))
|
||||
|
||||
var body = `Hey,%0D%0A%0D%0AI saw you trying to use Shuffle, and thought we may be able to help. Right now, it looks like you have ${workflow_amount} workflows made, but it still doesn't look like you are getting the most out of Shuffle. If you're interested, I'd love to set up a quick call to see if we can help you get more out of Shuffle. %0D%0A%0D%0A
|
||||
// Check if timestamp is more than 2 weeks ago and add "a while back" to the message
|
||||
const timeComparison = 1209600
|
||||
const extra_timestamp_text = lastLogin === 0 ? 0 : (Date.now()/1000 - lastLogin) > timeComparison ? " a while back" : ""
|
||||
console.log("LAST LOGIN: " + lastLogin, extra_timestamp_text)
|
||||
|
||||
// Check if cloud sync is active, and if so, add a message about it
|
||||
const cloudSyncInfo = selectedOrganization.cloud_sync === true ? "- Scale your onprem installation" : ""
|
||||
|
||||
var body = `Hey,%0D%0A%0D%0AI noticed you tried to use Shuffle${extra_timestamp_text}, and thought you may be interested in a POC. It looks like you have ${workflow_amount} workflows made, but it still doesn't look like you are getting what you wanted out of Shuffle. If you're interested, I'd love to set up a quick call to see if we can help you get more out of Shuffle. %0D%0A%0D%0A
|
||||
|
||||
Some of the things we can help with:%0D%0A
|
||||
${your_apps}
|
||||
- Configuring and authenticating your apps%0D%0A
|
||||
${usecases}
|
||||
- Creating special usecases and apps%0D%0A%0D%0A
|
||||
- Multi-Tenancy and creating special usecases%0D%0A
|
||||
${cloudSyncInfo}%0D%0A
|
||||
|
||||
Let me know if you're interested, or set up a call here: https://drift.me/${username}`
|
||||
If you're interested, please let me know a time that works for you, or set up a call here: https://drift.me/${username}`
|
||||
|
||||
return `mailto:${admins}?bcc=frikky@shuffler.io,binu@shuffler.io&subject=${subject}&body=${body}`
|
||||
}
|
||||
@@ -984,6 +1004,10 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
|
||||
leads.push("old customer")
|
||||
}
|
||||
|
||||
if (responseJson.lead_info.old_lead) {
|
||||
leads.push("old lead")
|
||||
}
|
||||
|
||||
if (responseJson.lead_info.tech_partner) {
|
||||
leads.push("tech partner")
|
||||
}
|
||||
@@ -2428,7 +2452,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
|
||||
renderValue={(selected) => selected.join(', ')}
|
||||
MenuProps={MenuProps}
|
||||
>
|
||||
{["contacted", "lead", "demo done", "pov", "customer", "open source", "student", "internal", "old customer", "creator", "tech partner"].map((name) => (
|
||||
{["contacted", "lead", "demo done", "pov", "customer", "open source", "student", "internal", "creator", "tech partner", "old customer", "old lead", ].map((name) => (
|
||||
<MenuItem key={name} value={name}>
|
||||
<Checkbox checked={selectedStatus.indexOf(name) > -1} />
|
||||
<ListItemText primary={name} />
|
||||
@@ -3124,7 +3148,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
|
||||
}
|
||||
|
||||
if (loginInfo > 0) {
|
||||
console.log("SETTING LAST LOGIN: " + loginInfo)
|
||||
lastLogin = new Date(loginInfo * 1000).toISOString().slice(0, 10) + " (" + data.login_info.length + ")"
|
||||
}
|
||||
}
|
||||
@@ -4382,7 +4405,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
|
||||
<Tab
|
||||
label=<span>
|
||||
<LockIcon style={iconStyle} />
|
||||
App Authentication
|
||||
App Auth
|
||||
</span>
|
||||
/>
|
||||
<Tab
|
||||
|
||||
@@ -108,10 +108,10 @@ import {
|
||||
Preview as PreviewIcon,
|
||||
ContentCopy as ContentCopyIcon,
|
||||
Circle as CircleIcon,
|
||||
SquareFoot as SquareFootIcon,
|
||||
AutoFixHigh as AutoFixHighIcon,
|
||||
|
||||
SquareFoot as SquareFootIcon,
|
||||
AutoFixHigh as AutoFixHighIcon,
|
||||
Polyline as PolylineIcon,
|
||||
QueryStats as QueryStatsIcon,
|
||||
} from "@mui/icons-material";
|
||||
|
||||
|
||||
@@ -591,7 +591,7 @@ const AngularWorkflow = (defaultprops) => {
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log("In useeffect for loopRunning: ", loopRunning)
|
||||
//console.log("In useeffect for loopRunning: ", loopRunning)
|
||||
if (loopRunning) {
|
||||
const intervalId = setInterval(() => {
|
||||
if (!loopRunning) {
|
||||
@@ -1244,7 +1244,7 @@ const AngularWorkflow = (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)
|
||||
} else {
|
||||
if (responseJson.status === "ABORTED" || responseJson.status === "STOPPED" || responseJson.status === "FAILURE" || responseJson.status === "WAITING") {
|
||||
@@ -1713,7 +1713,9 @@ const AngularWorkflow = (defaultprops) => {
|
||||
})
|
||||
.then((responseJson) => {
|
||||
if (!responseJson.success) {
|
||||
toast("Failed to start: " + responseJson.reason);
|
||||
//toast("Failed to start: " + responseJson.reason);
|
||||
toast(responseJson.reason);
|
||||
//toast.error(responseJson.reason);
|
||||
setExecutionRunning(false);
|
||||
setExecutionRequestStarted(false);
|
||||
stop();
|
||||
@@ -4593,7 +4595,6 @@ const AngularWorkflow = (defaultprops) => {
|
||||
}
|
||||
}
|
||||
|
||||
console.log("NODE: ", nodedata)
|
||||
if (nodedata.decorator !== true && nodedata.attachedTo === undefined) {
|
||||
var newdata = JSON.parse(JSON.stringify(nodedata))
|
||||
newdata.large_image = ""
|
||||
@@ -14591,7 +14592,7 @@ const AngularWorkflow = (defaultprops) => {
|
||||
onClose={() => {
|
||||
setExecutionModalOpen(false)
|
||||
}}
|
||||
style={{ resize: "both", overflow: "auto", zIndex: 10005 }}
|
||||
style={{ resize: "both", overflow: "auto", }}
|
||||
hideBackdrop={false}
|
||||
variant="temporary"
|
||||
BackdropProps={{
|
||||
@@ -14607,7 +14608,6 @@ const AngularWorkflow = (defaultprops) => {
|
||||
maxWidth: isMobile ? "100%" : 420,
|
||||
color: "white",
|
||||
fontSize: 18,
|
||||
zIndex: 10005,
|
||||
borderLeft: theme.palette.defaultBorder,
|
||||
},
|
||||
}}
|
||||
@@ -14631,16 +14631,32 @@ const AngularWorkflow = (defaultprops) => {
|
||||
: null}
|
||||
{executionModalView === 0 ? (
|
||||
<div style={{ padding: isMobile ? "0px 0px 0px 10px" : 25, zIndex: 12502, }}>
|
||||
<Breadcrumbs
|
||||
aria-label="breadcrumb"
|
||||
separator="›"
|
||||
style={{ color: "white", fontSize: 16 }}
|
||||
>
|
||||
<h2 style={{ color: "rgba(255,255,255,0.5)" }}>
|
||||
<DirectionsRunIcon style={{ marginRight: 10 }} />
|
||||
All Workflow Runs
|
||||
</h2>
|
||||
</Breadcrumbs>
|
||||
<div style={{display: "flex", }}>
|
||||
<Breadcrumbs
|
||||
aria-label="breadcrumb"
|
||||
separator="›"
|
||||
style={{ color: "white", fontSize: 16 }}
|
||||
>
|
||||
<h2 style={{ color: "rgba(255,255,255,0.5)" }}>
|
||||
<DirectionsRunIcon style={{ marginRight: 10 }} />
|
||||
All Workflow Runs
|
||||
</h2>
|
||||
</Breadcrumbs>
|
||||
<Tooltip
|
||||
title={"Explore Executions further"}
|
||||
placement="left-start"
|
||||
style={{ zIndex: 10010 }}
|
||||
>
|
||||
<a href={`/workflows/debug?workflow_id=${workflow.id}`} style={{textDecoration: "none", }}>
|
||||
<Button
|
||||
color="secondary"
|
||||
style={{marginLeft: 50, maxHeight: 30, marginTop: 20, }}
|
||||
>
|
||||
<QueryStatsIcon style={{color: "white", }}/>
|
||||
</Button>
|
||||
</a>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Button
|
||||
style={{ borderRadius: "0px" }}
|
||||
variant="outlined"
|
||||
@@ -15367,7 +15383,7 @@ const AngularWorkflow = (defaultprops) => {
|
||||
}}
|
||||
onClick={() => {
|
||||
const oldstartnode = cy.getElementById(data.action.id);
|
||||
console.log("FOUND NODe: ", oldstartnode)
|
||||
//console.log("FOUND NODe: ", oldstartnode)
|
||||
if (oldstartnode !== undefined && oldstartnode !== null) {
|
||||
const foundname = oldstartnode.data("label")
|
||||
if (foundname !== undefined && foundname !== null) {
|
||||
@@ -15375,7 +15391,7 @@ const AngularWorkflow = (defaultprops) => {
|
||||
}
|
||||
}
|
||||
|
||||
console.log("Click data: ", data)
|
||||
//console.log("Click data: ", data)
|
||||
//data.action.label = ""
|
||||
setSelectedResult(data);
|
||||
setCodeModalOpen(true);
|
||||
@@ -16476,7 +16492,7 @@ const AngularWorkflow = (defaultprops) => {
|
||||
|
||||
var newAuthOption = JSON.parse(JSON.stringify(authenticationOption));
|
||||
var newFields = [];
|
||||
console.log("Fields: ", newAuthOption.fields)
|
||||
console.log("Fields: ", newAuthOption.fields)
|
||||
for (let authkey in newAuthOption.fields) {
|
||||
const value = newAuthOption.fields[authkey];
|
||||
newFields.push({
|
||||
|
||||
+223
-141
@@ -242,7 +242,7 @@ export const appCategories = [
|
||||
"name": "Eradication",
|
||||
"color": "#FFC107",
|
||||
"icon": "eradication",
|
||||
"action_labels": ["List Alerts", "Close Alert", "Get 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", "Trigger host scan",],
|
||||
}, {
|
||||
"name": "Cases",
|
||||
"color": "#FFC107",
|
||||
@@ -374,8 +374,8 @@ const AppCreator = (defaultprops) => {
|
||||
"API key",
|
||||
"Bearer auth",
|
||||
"Basic auth",
|
||||
"Oauth2",
|
||||
"JWT",
|
||||
"Oauth2",
|
||||
];
|
||||
const apikeySelection = ["Header", "Query"];
|
||||
|
||||
@@ -411,6 +411,7 @@ const AppCreator = (defaultprops) => {
|
||||
const [appBuilding, setAppBuilding] = useState(false);
|
||||
const [fileDownloadEnabled, setFileDownloadEnabled] = useState(false);
|
||||
const [actionAmount, setActionAmount] = useState(increaseAmount);
|
||||
const [oauth2Type, setOauth2Type] = useState("application");
|
||||
const defaultAuth = {
|
||||
name: "",
|
||||
type: "header",
|
||||
@@ -1678,7 +1679,7 @@ const AppCreator = (defaultprops) => {
|
||||
value.in.length > 0
|
||||
) {
|
||||
setParameterName(value.in);
|
||||
optionset = true
|
||||
optionset = true
|
||||
}
|
||||
|
||||
} else if (value.scheme === "bearer") {
|
||||
@@ -1709,24 +1710,24 @@ const AppCreator = (defaultprops) => {
|
||||
newauth.push({
|
||||
"name": key,
|
||||
"type": value.in.toLowerCase(),
|
||||
"in": value.in.toLowerCase(),
|
||||
"in": value.in.toLowerCase(),
|
||||
"example": "",
|
||||
})
|
||||
} else {
|
||||
newauth.push({
|
||||
"name": key,
|
||||
"type": value.in.toLowerCase(),
|
||||
"in": value.in.toLowerCase(),
|
||||
"example": "",
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
newauth.push({
|
||||
"name": key,
|
||||
"type": value.in.toLowerCase(),
|
||||
"in": value.in.toLowerCase(),
|
||||
"example": "",
|
||||
})
|
||||
}
|
||||
|
||||
if (value.description !== undefined && value.description !== null && value.description.length > 0) {
|
||||
// Don't want a real description - just the ones we're replacing with
|
||||
if ((value.description.split(" ").length - 1) <= 2) {
|
||||
setRefreshUrl(value.description)
|
||||
}
|
||||
}
|
||||
// Don't want a real description - just the ones we're replacing with
|
||||
if ((value.description.split(" ").length - 1) <= 2) {
|
||||
setRefreshUrl(value.description)
|
||||
}
|
||||
}
|
||||
|
||||
} else if (value.scheme === "basic") {
|
||||
setAuthenticationOption("Basic auth");
|
||||
@@ -1734,15 +1735,15 @@ const AppCreator = (defaultprops) => {
|
||||
optionset = true
|
||||
|
||||
} else if (value.scheme === "oauth2") {
|
||||
setAuthenticationOption("Oauth2");
|
||||
setAuthenticationRequired(true);
|
||||
optionset = true
|
||||
setAuthenticationOption("Oauth2");
|
||||
setAuthenticationRequired(true);
|
||||
optionset = true
|
||||
|
||||
} else if (value.type === "oauth2" || key === "Oauth2" || key === "Oauth2c" || (key !== undefined && key !== null && key.toLowerCase().includes("oauth2"))) {
|
||||
//toast("Can't handle Oauth2 auth yet.")
|
||||
setAuthenticationOption("Oauth2");
|
||||
setAuthenticationRequired(true);
|
||||
optionset = true
|
||||
optionset = true
|
||||
|
||||
//console.log("FLOW-1: ", value)
|
||||
const flowkey = value.flow === undefined ? "flows" : "flow";
|
||||
@@ -1754,12 +1755,11 @@ const AppCreator = (defaultprops) => {
|
||||
//console.log("FLOW2: ", value[flowkey][basekey])
|
||||
if (value[flowkey] !== undefined && value[flowkey][basekey] !== undefined
|
||||
) {
|
||||
if (
|
||||
value[flowkey][basekey].authorizationUrl !== undefined &&
|
||||
parameterName.length === 0
|
||||
) {
|
||||
setParameterName(value[flowkey][basekey].authorizationUrl);
|
||||
}
|
||||
if (value[flowkey][basekey].authorizationUrl !== undefined && parameterName.length === 0) {
|
||||
setParameterName(value[flowkey][basekey].authorizationUrl);
|
||||
// } else {
|
||||
// setOauth2Type("application")
|
||||
}
|
||||
|
||||
var tokenUrl = "";
|
||||
if (value[flowkey][basekey].tokenUrl !== undefined) {
|
||||
@@ -2846,7 +2846,6 @@ const AppCreator = (defaultprops) => {
|
||||
style={{ margin: 0, flex: "1", backgroundColor: inputColor }}
|
||||
fullWidth={true}
|
||||
placeholder="/security/user/authenticate"
|
||||
type="name"
|
||||
id="standard-required"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
@@ -2866,6 +2865,40 @@ const AppCreator = (defaultprops) => {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
style={{ marginTop: 10 }}
|
||||
>
|
||||
Optional: Authentication queries
|
||||
</Typography>
|
||||
{/*
|
||||
<TextField
|
||||
style={{ margin: 0, flex: "1", backgroundColor: inputColor }}
|
||||
fullWidth={true}
|
||||
placeholder="grant_type=client_credentials&scope=connect.api.read"
|
||||
id=""
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
defaultValue={parameterName}
|
||||
helperText={
|
||||
<span style={{ color: "white", marginBottom: "2px" }}>
|
||||
Must use 'key=value&key=value' format
|
||||
</span>
|
||||
}
|
||||
onBlur={(e) => {
|
||||
//setParameterName(e.target.value)
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
*/}
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
@@ -2878,56 +2911,64 @@ const AppCreator = (defaultprops) => {
|
||||
color="textSecondary"
|
||||
style={{ marginTop: 10 }}
|
||||
>
|
||||
Find the Authorization URL, Token URL and scopes in question for the API. Ensure the app in question is pointed at https://shuffler.io/set_authentication
|
||||
{oauth2Type === "delegated" ?
|
||||
"Find the Authorization URL, Token URL and scopes in question for the API. Ensure your app in the service uses redirect url https://shuffler.io/set_authentication"
|
||||
:
|
||||
"Find the Token URL and scopes in question for the API"
|
||||
}
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
style={{ marginTop: 10 }}
|
||||
>
|
||||
Base Authorization URL for Oauth2
|
||||
</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{ margin: 0, flex: "1", backgroundColor: inputColor }}
|
||||
fullWidth={true}
|
||||
placeholder="https://.../oauth2/authorize"
|
||||
type="name"
|
||||
id="standard-required"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
value={parameterName}
|
||||
onChange={(e) => setParameterName(e.target.value)}
|
||||
{oauth2Type === "delegated" ?
|
||||
<span>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
style={{ marginTop: 10 }}
|
||||
>
|
||||
Base Authorization URL for Oauth2
|
||||
</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{ margin: 0, flex: "1", backgroundColor: inputColor }}
|
||||
fullWidth={true}
|
||||
placeholder="https://.../oauth2/authorize"
|
||||
type="name"
|
||||
id="standard-required"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
value={parameterName}
|
||||
onChange={(e) => setParameterName(e.target.value)}
|
||||
onBlur={(event) => {
|
||||
var tmpstring = event.target.value.trim();
|
||||
var tmpstring = event.target.value.trim();
|
||||
|
||||
if (
|
||||
tmpstring.length > 4 &&
|
||||
!tmpstring.startsWith("http") &&
|
||||
!tmpstring.startsWith("ftp")
|
||||
) {
|
||||
toast("Auth URL must start with http(s)://");
|
||||
}
|
||||
if (
|
||||
tmpstring.length > 4 &&
|
||||
!tmpstring.startsWith("http") &&
|
||||
!tmpstring.startsWith("ftp")
|
||||
) {
|
||||
toast("Auth URL must start with http(s)://");
|
||||
}
|
||||
|
||||
if (tmpstring.includes("?")) {
|
||||
var newtmp = tmpstring.split("?")
|
||||
if (tmpstring.length > 1) {
|
||||
tmpstring = newtmp[0]
|
||||
}
|
||||
}
|
||||
if (tmpstring.includes("?")) {
|
||||
var newtmp = tmpstring.split("?")
|
||||
if (tmpstring.length > 1) {
|
||||
tmpstring = newtmp[0]
|
||||
}
|
||||
}
|
||||
|
||||
setParameterName(tmpstring)
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
setParameterName(tmpstring)
|
||||
}}
|
||||
InputProps={{
|
||||
classes: {
|
||||
notchedOutline: classes.notchedOutline,
|
||||
},
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
: null}
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
@@ -2977,75 +3018,79 @@ const AppCreator = (defaultprops) => {
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
style={{ marginTop: 10 }}
|
||||
>
|
||||
Refresh-token URL for Oauth2 (Optional)
|
||||
</Typography>
|
||||
<TextField
|
||||
style={{ margin: 0, flex: "1", backgroundColor: inputColor }}
|
||||
fullWidth={true}
|
||||
placeholder="The URL to retrieve refresh-tokens at"
|
||||
type="name"
|
||||
id="standard-required"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
value={refreshUrl}
|
||||
onChange={(e) => setRefreshUrl(e.target.value)}
|
||||
onBlur={(event) => {
|
||||
var tmpstring = event.target.value.trim();
|
||||
{oauth2Type === "delegated" ?
|
||||
<span>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
style={{ marginTop: 10 }}
|
||||
>
|
||||
Refresh-token URL for Oauth2 (Optional)
|
||||
</Typography>
|
||||
<TextField
|
||||
style={{ margin: 0, flex: "1", backgroundColor: inputColor }}
|
||||
fullWidth={true}
|
||||
placeholder="The URL to retrieve refresh-tokens at"
|
||||
type="name"
|
||||
id="standard-required"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
value={refreshUrl}
|
||||
onChange={(e) => setRefreshUrl(e.target.value)}
|
||||
onBlur={(event) => {
|
||||
var tmpstring = event.target.value.trim();
|
||||
|
||||
if (
|
||||
tmpstring.length > 4 &&
|
||||
!tmpstring.startsWith("http") &&
|
||||
!tmpstring.startsWith("ftp")
|
||||
) {
|
||||
toast("Refresh URL must start with http(s)://");
|
||||
}
|
||||
if (
|
||||
tmpstring.length > 4 &&
|
||||
!tmpstring.startsWith("http") &&
|
||||
!tmpstring.startsWith("ftp")
|
||||
) {
|
||||
toast("Refresh URL must start with http(s)://");
|
||||
}
|
||||
|
||||
if (tmpstring.includes("?")) {
|
||||
var newtmp = tmpstring.split("?")
|
||||
if (tmpstring.length > 1) {
|
||||
tmpstring = newtmp[0]
|
||||
}
|
||||
}
|
||||
if (tmpstring.includes("?")) {
|
||||
var newtmp = tmpstring.split("?")
|
||||
if (tmpstring.length > 1) {
|
||||
tmpstring = newtmp[0]
|
||||
}
|
||||
}
|
||||
|
||||
setRefreshUrl(tmpstring)
|
||||
}}
|
||||
InputProps={{
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
style={{ marginTop: 10 }}
|
||||
>
|
||||
Scopes for Oauth2
|
||||
</Typography>
|
||||
<MuiChipsInput
|
||||
style={{border: "2px solid #f86a3e", borderRadius: theme.palette.borderRadius,}}
|
||||
setRefreshUrl(tmpstring)
|
||||
}}
|
||||
InputProps={{
|
||||
style: {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
: null}
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
style={{ marginTop: 10 }}
|
||||
>
|
||||
Scopes for Oauth2
|
||||
</Typography>
|
||||
<MuiChipsInput
|
||||
style={{border: "2px solid #f86a3e", borderRadius: theme.palette.borderRadius,}}
|
||||
required
|
||||
InputProps={{
|
||||
style: {
|
||||
color: "white",
|
||||
maxHeight: 50,
|
||||
},
|
||||
}}
|
||||
style={{ maxHeight: 80, overflowX: "hidden", overflowY: "auto" }}
|
||||
placeholder="Available Oauth2 Scopes"
|
||||
color="primary"
|
||||
fullWidth
|
||||
value={oauth2Scopes}
|
||||
InputProps={{
|
||||
style: {
|
||||
color: "white",
|
||||
maxHeight: 50,
|
||||
},
|
||||
}}
|
||||
style={{ maxHeight: 80, overflowX: "hidden", overflowY: "auto" }}
|
||||
placeholder="Available Oauth2 Scopes (enter to add)"
|
||||
color="primary"
|
||||
fullWidth
|
||||
value={oauth2Scopes}
|
||||
onChange={(chips) => {
|
||||
setOauth2Scopes(chips)
|
||||
setUpdate(Math.random())
|
||||
}}
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
@@ -3125,7 +3170,7 @@ const AppCreator = (defaultprops) => {
|
||||
</Select>
|
||||
</div>
|
||||
<div style={{marginLeft: 5, flex: 1,}}>
|
||||
Value prefix
|
||||
Prefix
|
||||
<TextField
|
||||
style={{ marginTop: 0, flex: "1", backgroundColor: inputColor }}
|
||||
fullWidth={true}
|
||||
@@ -3137,7 +3182,7 @@ const AppCreator = (defaultprops) => {
|
||||
value={refreshUrl}
|
||||
onChange={(e) => {
|
||||
// Just reusing this state
|
||||
setRefreshUrl(e.target.value);
|
||||
setRefreshUrl(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -3618,13 +3663,13 @@ const AppCreator = (defaultprops) => {
|
||||
<Dialog
|
||||
open={actionsModalOpen}
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
PaperProps={{
|
||||
style: {
|
||||
backgroundColor: surfaceColor,
|
||||
color: "white",
|
||||
minWidth: 500,
|
||||
maxWidth: 500,
|
||||
maxHeight: 800,
|
||||
minWidth: 550,
|
||||
maxWidth: 550,
|
||||
maxHeight: 750,
|
||||
},
|
||||
}}
|
||||
onClose={() => {
|
||||
@@ -5865,6 +5910,7 @@ const AppCreator = (defaultprops) => {
|
||||
}}
|
||||
/>
|
||||
<div style={{padding: 25, border: "2px solid rgba(255,255,255,0.7)", borderRadius: theme.palette.borderRadius, }}>
|
||||
<span style={{display: "flex", }}>
|
||||
<FormControl style={{ }} variant="outlined">
|
||||
<Typography variant="h6">Authentication</Typography>
|
||||
<a
|
||||
@@ -5889,7 +5935,7 @@ const AppCreator = (defaultprops) => {
|
||||
setParameterLocation("")
|
||||
}
|
||||
|
||||
setExtraAuth([])
|
||||
setExtraAuth([])
|
||||
}
|
||||
}}
|
||||
value={authenticationOption}
|
||||
@@ -5910,6 +5956,42 @@ const AppCreator = (defaultprops) => {
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
{authenticationOption === "Oauth2" ?
|
||||
<FormControl style={{ marginLeft: 350, maxWidth: 200, }} variant="outlined">
|
||||
{/*
|
||||
<Typography variant="body2">
|
||||
- Delegated: The user will get a popup for access their personal data.
|
||||
- Application: Permissions are set by the app creator in the 3rd party platform.
|
||||
</Typography>
|
||||
*/}
|
||||
<Select
|
||||
fullWidth
|
||||
label="Oauth2 type"
|
||||
onChange={(e) => {
|
||||
setOauth2Type(e.target.value);
|
||||
}}
|
||||
value={oauth2Type}
|
||||
style={{
|
||||
backgroundColor: inputColor,
|
||||
color: "white",
|
||||
height: "50px",
|
||||
}}
|
||||
>
|
||||
{["delegated", "application"].map((data, index) => (
|
||||
<MenuItem
|
||||
key={index}
|
||||
style={{ backgroundColor: inputColor, color: "white" }}
|
||||
value={data}
|
||||
>
|
||||
{data}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
: null}
|
||||
</span>
|
||||
|
||||
|
||||
<div style={{marginTop: 15 }} />
|
||||
{basicAuth}
|
||||
{bearerAuth}
|
||||
|
||||
@@ -419,7 +419,7 @@ const Welcome = (props) => {
|
||||
</div>
|
||||
:
|
||||
<Fade in={true}>
|
||||
<div style={{maxWidth: isMobile ? null : 590, margin: "auto", marginTop: 50, }}>
|
||||
<div style={{maxWidth: isMobile ? null : 590, margin: "auto", marginTop: 50,textAlign : isMobile ? "center" : null }}>
|
||||
<Typography variant="h4" style={{color: "#F1F1F1", marginTop: 50, fontSize: 32}}>
|
||||
Help us get to know you
|
||||
</Typography>
|
||||
|
||||
@@ -68,11 +68,12 @@ import {
|
||||
CloudDownload as CloudDownloadIcon,
|
||||
ExpandLess as ExpandLessIcon,
|
||||
ExpandMore as ExpandMoreIcon,
|
||||
Done as DoneIcon,
|
||||
CheckCircle as CheckCircleIcon,
|
||||
RadioButtonUnchecked as RadioButtonUncheckedIcon,
|
||||
Done as DoneIcon,
|
||||
CheckCircle as CheckCircleIcon,
|
||||
RadioButtonUnchecked as RadioButtonUncheckedIcon,
|
||||
ArrowLeft as ArrowLeftIcon,
|
||||
ArrowRight as ArrowRightIcon,
|
||||
QueryStats as QueryStatsIcon,
|
||||
} from "@mui/icons-material";
|
||||
|
||||
import { DataGrid, GridToolbar } from "@mui/x-data-grid";
|
||||
@@ -3061,6 +3062,18 @@ const Workflows = (props) => {
|
||||
|
||||
const workflowButtons = (
|
||||
<span>
|
||||
<Tooltip color="primary" title={"Explore Workflow Runs"} placement="top">
|
||||
<Button
|
||||
disabled={workflows.length === 0}
|
||||
color="secondary"
|
||||
variant="text"
|
||||
onClick={() => {
|
||||
navigate("/workflows/debug")
|
||||
}}
|
||||
>
|
||||
<QueryStatsIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
{view === "list" && (
|
||||
<Tooltip color="primary" title={"Grid View"} placement="top">
|
||||
<Button
|
||||
@@ -3423,8 +3436,8 @@ const Workflows = (props) => {
|
||||
height: isCloud ? imgSize : imgSize+4,
|
||||
width: isCloud ? imgSize : imgSize+4,
|
||||
position: "absolute",
|
||||
top: isCloud ? -1 : -2,
|
||||
left: isCloud ? -1 : -2,
|
||||
top: -2,
|
||||
left: -2,
|
||||
cursor: "pointer",
|
||||
zIndex: 99,
|
||||
border: "2px solid rgba(255,255,255,0.7)",
|
||||
@@ -3786,7 +3799,7 @@ const Workflows = (props) => {
|
||||
color: "white",
|
||||
fontSize: 18,
|
||||
borderLeft: theme.palette.defaultBorder,
|
||||
marginTop: 64,
|
||||
marginTop: 100,
|
||||
borderRadius: "5px 0px 0px 0px",
|
||||
},
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user