marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed oauth2, docs and popups for onboarding

Browse Source
This commit is contained in:
Frikky
2023-11-19 18:03:53 +01:00
parent a0711dd453
commit c1bfb159c6
10 changed files with 367 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/app_sdk/app_base.py
+1 -28
View File
@@ -3585,36 +3585,9 @@ class AppBase:
})
break
#thread = threading.Thread(target=func, args=(**params,))
#thread.start()
#thread.join(timeout)
#if thread.is_alive():
# # The thread is still running, so we need to stop it
# # You can handle this as needed, such as raising an exception
# timeout_handler()
#with Timeout(timeout):
# newres = func(**params)
# break
#except Timeout.Timeout as e:
# self.logger.info(f"[DEBUG] Timeout error: {e}")
# newres = json.dumps({
# "success": False,
# "reason": "Timeout error within %d seconds. This typically happens if we can't reach the API you're trying to reach." % timeout,
# "exception": str(e),
# })
# break
except TypeError as e:
newres = ""
self.logger.info(f"[DEBUG] Got exec type error: {e}")
self.logger.info(f"[ERROR] Got function exec type error: {e}")
try:
e = json.loads(f"{e}")
except:
frontend/src/components/AppSearchButtons.jsx
+22 -11
View File
@@ -47,8 +47,6 @@ const AppSearchButtons = (props) => {
const [newSelectedApp, setNewSelectedApp] = useState(undefined)
useEffect(() => {
console.log("AppSearchButtons: newSelectedApp: " + JSON.stringify(newSelectedApp))
if (newSelectedApp !== undefined && setMissing != undefined) {
console.log("AppSearchButtons: setMissing is defined!")
@@ -131,9 +129,12 @@ const AppSearchButtons = (props) => {
//setFrameworkLoaded(true)
})
}
const icon = foundApp.large_image
console.log("index:", moreButton)
console.log("totalApps:", totalApps)
var foundAppImage = AppImage
if (foundApp.name !== undefined && foundApp.name !== null && !foundApp.name.includes(":default")) {
foundAppImage = foundApp.large_image
}
let xsValue = 12;
if (index === totalApps - 1 || index === totalApps - 2 || index === totalApps - 3 || index === totalApps - 4) {
@@ -142,6 +143,8 @@ const AppSearchButtons = (props) => {
if (index === totalApps - 5) {
xsValue = 12;
}
// This is silly huh
if (moreButton) {
switch (index) {
case totalApps - 1:
@@ -159,7 +162,6 @@ const AppSearchButtons = (props) => {
xsValue = 12;
break;
default:
// Handle other cases if needed
}
}
@@ -221,10 +223,11 @@ const AppSearchButtons = (props) => {
>
<IconButton
style={{ zIndex: 12501, position: "absolute", top: 32, right: 16 }}
disabled
onClick={(e) => {
e.preventDefault();
setLocalSearchOpen(false)
setDefaultSearch("")
const submitDeletedApp = {
"description": "",
"id": "remove",
@@ -233,15 +236,23 @@ const AppSearchButtons = (props) => {
}
setFrameworkItem(submitDeletedApp)
setNewSelectedApp({})
if (setDefaultSearch !== undefined) {
setDefaultSearch("")
}
setTimeout(() => {
setDiscoveryData({})
if (setDiscoveryData !== undefined) {
setDiscoveryData({})
}
setFrameworkItem(submitDeletedApp)
//setNewSelectedApp({})
}, 1000)
//setAppName(discoveryData.cases.name)
}}
>
<DeleteIcon style={{ color: "white", height: 15, width: 15, }} />
<DeleteIcon style={{ height: 15, width: 15, }} />
</IconButton>
</Tooltip>
</div>
@@ -283,12 +294,12 @@ const AppSearchButtons = (props) => {
}}
>
<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" }}>
{foundAppImage === undefined || foundAppImage === null || foundAppImage.length === 0 ?
<div style={{ width: 40, height: 40, borderRadius: 40, backgroundColor: "#2F2F2F", textAlign: "center" }}>
<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={foundAppImage} />
}
<div style={{ marginLeft: 8, }}>
<Typography style={{
frontend/src/components/Oauth2Auth.jsx
+84 -15
View File
@@ -112,20 +112,21 @@ const AuthenticationOauth2 = (props) => {
authenticationType.client_secret.length > 0
);
const [clientId, setClientId] = React.useState(
defaultConfigSet ? authenticationType.client_id : ""
);
const [clientSecret, setClientSecret] = React.useState(
defaultConfigSet ? authenticationType.client_secret : ""
);
console.log("AUTH: ", authenticationType)
const [clientId, setClientId] = React.useState(defaultConfigSet ? authenticationType.client_id : "");
const [clientSecret, setClientSecret] = React.useState(defaultConfigSet ? authenticationType.client_secret : "");
const [username, setUsername] = React.useState("");
const [password, setPassword] = React.useState("");
const [oauthUrl, setOauthUrl] = React.useState("");
const [buttonClicked, setButtonClicked] = React.useState(false);
const [offlineAccess, setOfflineAccess] = React.useState(true);
const allscopes = authenticationType.scope !== undefined ? authenticationType.scope : [];
const allscopes = authenticationType.scope !== undefined && authenticationType.scope !== null ? authenticationType.scope : [];
const [selectedScopes, setSelectedScopes] = React.useState(allscopes !== null && allscopes !== undefined ? allscopes.length > 0 && allscopes.length <= 3 ? [allscopes[0]] : [] : [])
const [selectedScopes, setSelectedScopes] = React.useState(allscopes.length > 0 && allscopes.length <= 3 ? [allscopes[0]] : [])
const [manuallyConfigure, setManuallyConfigure] = React.useState(
defaultConfigSet ? false : true
);
@@ -158,6 +159,7 @@ const AuthenticationOauth2 = (props) => {
return null;
}
const startOauth2Request = (admin_consent) => {
// Admin consent also means to add refresh tokens
console.log("Inside oauth2 request for app: ", selectedApp.name)
@@ -319,6 +321,32 @@ const AuthenticationOauth2 = (props) => {
"value": authenticationType.token_uri,
}]
if (authenticationType.grant_type !== undefined && authenticationType.grant_type !== null && authenticationType.grant_type.length > 0) {
if (authenticationType.grant_type === "client_credentials") {
parsedFields.push({
"key": "grant_type",
"value": authenticationType.grant_type,
})
} else if (authenticationType.grant_type === "password") {
parsedFields.push({
"key": "grant_type",
"value": authenticationType.grant_type,
})
parsedFields.push({
"key": "username",
"value": username,
})
parsedFields.push({
"key": "password",
"value": password,
})
} else {
toast("Unknown grant type: " + authenticationType.grant_type)
}
}
const appAuthData = {
"label": "OAuth2 for " + selectedApp.name,
"app": {
@@ -478,8 +506,6 @@ const AuthenticationOauth2 = (props) => {
}
return;
//do {
//} while (
};
authenticationOption.app.actions = [];
@@ -647,7 +673,7 @@ const AuthenticationOauth2 = (props) => {
)}
</Button>
if (authButtonOnly === true) {
if (authButtonOnly === true && (authenticationType.grant_type === undefined || authenticationType.grant_type === null || authenticationType.grant_type === "")) {
return autoAuthButton
}
@@ -872,8 +898,51 @@ const AuthenticationOauth2 = (props) => {
//authenticationOption.label = event.target.value
}}
/>
{allscopes.length === 0 ? null : "Scopes (access rights)"}
{allscopes.length === 0 ? null : (
{authenticationType.grant_type !== "password" ? null :
<div>
<TextField
style={{
backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius,
}}
InputProps={{
style: {
},
}}
fullWidth
color="primary"
label={"Username"}
placeholder={"Username"}
onChange={(event) => {
setUsername(event.target.value);
//authenticationOption.label = event.target.value
}}
/>
<TextField
style={{
backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius,
marginBottom: 10,
}}
InputProps={{
style: {
},
}}
fullWidth
color="primary"
label={"Password"}
placeholder={"Password"}
onChange={(event) => {
setPassword(event.target.value);
//authenticationOption.label = event.target.value
}}
/>
</div>
}
{allscopes === undefined || allscopes === null || allscopes.length === 0 ? null : "Scopes (access rights)"}
{allscopes === undefined || allscopes === null || allscopes.length === 0 ? null : (
<div style={{width: "100%", marginTop: 10, display: "flex"}}>
<span>
<Select
@@ -931,7 +1000,7 @@ const AuthenticationOauth2 = (props) => {
borderRadius: theme.palette.borderRadius,
}}
disabled={
clientSecret.length === 0 || clientId.length === 0 || buttonClicked || selectedScopes.length === 0
clientSecret.length === 0 || clientId.length === 0 || buttonClicked || (allscopes.length !== 0 && selectedScopes.length === 0)
}
variant="contained"
fullWidth
frontend/src/components/SearchData.jsx
+53 -85
View File
@@ -50,6 +50,7 @@ const SearchData = props => {
const [value, setValue] = useState("");
const [userTyped, setUserTyped] = useState(false)
if (serverside === true) {
return null
}
@@ -59,25 +60,16 @@ const SearchData = props => {
//}
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)
// useEffect(() => {
// if (searchOpen) {
// var tarfield = document.getElementById("shuffle_search_field")
// tarfield.focus()
// }
// }, searchOpen)
const SearchBox = ({ currentRefinement, refine, isSearchStalled, }) => {
const keyPressHandler = (e) => {
@@ -85,9 +77,11 @@ const SearchData = props => {
if (e.which === 13) {
// alert("You pressed enter!");
navigate("/search?q=" + currentRefinement, { state: value, replace: true });
setSearchOpen(false)
setModalOpen(false)
return
setSearchOpen(false)
setModalOpen(false)
return
}
};
/*
@@ -104,10 +98,11 @@ const SearchData = props => {
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%", }}
style={{ zIndex: 1100, marginTop:-20,marginBottom: 200, position:"fixed", backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, width: 685, }}
InputProps={{
style: {
color: "white",
@@ -120,7 +115,7 @@ const SearchData = props => {
disableUnderline: true,
startAdornment: (
<InputAdornment position="start">
<SearchIcon style={{ marginLeft: 5, marginRight: 10, color: "#f86a3e", }} />
<SearchIcon style={{ marginLeft: 5, marginRight: 10, color: "#f86a3e", }} />
</InputAdornment>
),
endAdornment: (
@@ -188,8 +183,8 @@ const SearchData = props => {
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", }}>
<Card elevation={0} style={{ marginRight: 10,marginTop:50, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 75, boxShadows: "none", }}>
<Typography variant="h6" style={{ margin: "10px 10px 0px 20px", color:"#FF8444", borderBottom: "1px solid", width: 105 }}>
Workflows
</Typography>
@@ -349,13 +344,13 @@ const SearchData = props => {
const baseImage = <LibraryBooksIcon />
return (
<Card elevation={0} style={{ marginRight: 10, color: "white", zIndex: 1001, backgroundColor: theme.palette.inputColor, width: "100%", left: -30, boxShadows: "none", }}>
<Card elevation={0} style={{ marginRight: 10, color: "white", zIndex: 999, backgroundColor: theme.palette.inputColor, width: 685, 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", }}>
<Typography variant="h6" style={{ margin: "40px 10px 0px 20px", color:"#FF8444", borderBottom: "1px solid", width: 50 }}>
Apps
</Typography>
@@ -392,7 +387,6 @@ const SearchData = props => {
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
@@ -401,7 +395,6 @@ const SearchData = props => {
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) => {
@@ -520,13 +513,13 @@ const SearchData = props => {
//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", }}>
<Card elevation={0} style={{ marginRight: 10,marginTop:50, 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", }}>
<Typography variant="h6" style={{ margin: "10px 10px 0px 20px", color:"#FF8444", borderBottom: "1px solid", width: 152}}>
Documentation
</Typography>
{/*
@@ -643,42 +636,14 @@ const SearchData = props => {
</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 = (
const gettingStartData = !searchOpen ? (
<Grid
container
direction="row"
alignItems="center"
// justify="space-evenly"
>
<Grid item xs={6} style={{ alignItems: "center", flexDirection: "row" }}>
<Grid item xs={6} style={{ alignItems: "center", flexDirection: "row", marginTop: 70, }}>
<List style={{ width: "100%", marginLeft: 10, color: "var(--Paragraph-text, #C8C8C8)" }}>
<ListItem>
<ArticleIcon style={{ marginRight: 10, display: "flex", width: 22 }} />
@@ -715,7 +680,7 @@ const SearchData = props => {
</div>
</List>
</Grid>
<Grid item xs={6} style={{ alignItems: "center", flexDirection: "row", width: 22 }}>
<Grid item xs={6} style={{ alignItems: "center", flexDirection: "row", width: 22, marginTop: 70 }}>
<List style={{ width: "100%", marginLeft: 10, color: "var(--Paragraph-text, #C8C8C8)", }}>
<ListItem>
<ManageSearchIcon style={{ marginRight: 10, display: "flex" }} />
@@ -749,29 +714,6 @@ const SearchData = props => {
</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"; }} >
@@ -779,12 +721,38 @@ const SearchData = props => {
</Button>
</Grid>
</Grid>
): null
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={{ }}>
<Index indexName="appsearch">
<CustomAppHits />
</Index>
</Grid>
<Grid item xs="auto" style={{ }}>
<Index indexName="workflows">
<CustomWorkflowHits />
</Index>
</Grid>
<Grid item xs="auto" style={{ }}>
<Index indexName="documentation">
<CustomDocHits />
</Index>
</Grid>
</Grid>
</div>
)
return (
<div ref={node} style={{ width: "100%", maxWidth: "100%", margin: "auto", position: "relative", }}>
<div ref={node} style={{ width: "100%", maxWidth: "100%", margin: "auto", }}>
<InstantSearch searchClient={searchClient} indexName="appsearch" onClick={() => {
console.log("CLICKED 1")
}}>
<Configure clickAnalytics />
<CustomSearchBox onClick={() => {
frontend/src/components/Searchfield.jsx
+8 -8
View File
@@ -90,8 +90,8 @@ const SearchField = props => {
},
}}
>
{isHeader ? <div style={{ display: "flex" }}>
<DialogTitle style={{ marginTop: 15, marginLeft: 5, color: "var(--Paragraph-text, #C8C8C8)" }} >Search Shuffle</DialogTitle>
{isHeader ? <div style={{ display: "flex"}}>
<DialogTitle style={{ marginTop: 15, marginLeft: 5, color: "var(--Paragraph-text, #C8C8C8)" }} >Search for docs, apps, workflows and more</DialogTitle>
<Button fullWidth style={{ marginLeft: 470 }} onClick={() => {
setModalOpen(false);
}}><CloseIcon /></Button>
@@ -101,12 +101,11 @@ const SearchField = props => {
<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)"}}>
<span style={{display:"flex", width:"100%", height:30}}>
{/* <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>
@@ -118,8 +117,9 @@ const SearchField = props => {
<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>
);
frontend/src/components/WorkflowTemplatePopup.jsx
+3 -4
View File
@@ -44,7 +44,6 @@ const WorkflowTemplatePopup = (props) => {
const [missingDestination, setMissingDestination] = React.useState(undefined);
useEffect(() => {
console.log("Source & Dest check:", missingSource, missingDestination)
}, [missingSource, missingDestination])
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
@@ -392,7 +391,7 @@ const WorkflowTemplatePopup = (props) => {
appFramework={appFramework}
appType={missingSource.type}
appImage={missingSource.image}
AppImage={missingSource.image}
setMissing={setMissingSource}
/>
@@ -406,7 +405,7 @@ const WorkflowTemplatePopup = (props) => {
appFramework={appFramework}
appType={missingDestination.type}
appImage={missingDestination.image}
AppImage={missingDestination.image}
setMissing={setMissingDestination}
/>
@@ -443,7 +442,7 @@ const WorkflowTemplatePopup = (props) => {
if (title.length > maxlength) {
parsedTitle = title.substring(0, maxlength) + "..."
}
console.log("isHomePage", isHomePage)
parsedTitle = parsedTitle.replaceAll("_", " ")
const parsedDescription = description !== undefined && description !== null ? description.replaceAll("_", " ") : ""
frontend/src/views/AngularWorkflow.jsx
+12 -7
View File
@@ -11,7 +11,7 @@ import { useNavigate, Link, useParams } from "react-router-dom";
import { useBeforeunload } from "react-beforeunload";
import ReactJson from "react-json-view";
import { NestedMenuItem } from 'mui-nested-menu';
import ReactMarkdown from "react-markdown";
import Markdown from "react-markdown";
//import { useAlert
import { ToastContainer, toast } from "react-toastify"
import { isMobile } from "react-device-detect"
@@ -635,7 +635,11 @@ const AngularWorkflow = (defaultprops) => {
if (responseJson.success === true) {
if (responseJson.reason !== undefined && responseJson.reason !== undefined && responseJson.reason.length > 0) {
if (!responseJson.reason.includes("404: Not Found") && responseJson.reason.length > 25) {
selectedApp.documentation = responseJson.reason
// Translate <img> into markdown ![]()
const imgRegex = /<img.*?src="(.*?)"/g;
const newdata = responseJson.reason.replace(imgRegex, '![]($1)');
selectedApp.documentation = newdata
setSelectedApp(selectedApp)
setUpdate(Math.random())
}
@@ -978,8 +982,6 @@ const AngularWorkflow = (defaultprops) => {
tmpView = execution_id;
}
console.log("TMPVIEW: ", tmpView);
// Compare with currently selected item
if (tmpView !== undefined && tmpView !== null && tmpView.length > 0) {
// Don't clean up if it's already open
@@ -1669,7 +1671,7 @@ const AngularWorkflow = (defaultprops) => {
if (hasSaved === false) {
setExecutionRequestStarted(true);
saveWorkflow(workflow, executionArgument, startNode);
console.log("FIXME: Might have forgotten to save before executing.");
//console.log("FIXME: Might have forgotten to save before executing.");
return;
}
@@ -3783,6 +3785,8 @@ const AngularWorkflow = (defaultprops) => {
//}
curaction.app_id = curapp.id
console.log("CURAPP: ", curapp.authentication)
setAuthenticationType(
curapp.authentication.type === "oauth2" && curapp.authentication.redirect_uri !== undefined && curapp.authentication.redirect_uri !== null ? {
type: "oauth2",
@@ -3792,6 +3796,7 @@ const AngularWorkflow = (defaultprops) => {
scope: curapp.authentication.scope,
client_id: curapp.authentication.client_id,
client_secret: curapp.authentication.client_secret,
grant_type: curapp.authentication.grant_type,
} : {
type: "",
}
@@ -16955,7 +16960,7 @@ const AngularWorkflow = (defaultprops) => {
)}
</span>
) : (
<ReactMarkdown
<Markdown
components={{
img: Img,
code: CodeHandler,
@@ -16974,7 +16979,7 @@ const AngularWorkflow = (defaultprops) => {
}}
>
{selectedApp.documentation}
</ReactMarkdown>
</Markdown>
)}
</div>
</div>
frontend/src/views/AppCreator.jsx
+81 -32
View File
@@ -398,7 +398,6 @@ const AppCreator = (defaultprops) => {
apikeySelection.length > 0 ? apikeySelection[0] : ""
);
const [refreshUrl, setRefreshUrl] = useState("");
const [oauth2Scopes, setOauth2Scopes] = useState([]);
const [projectCategories, setProjectCategories] = useState([]);
const [selectedCategory, setSelectedCategory] = useState("");
@@ -411,7 +410,10 @@ const AppCreator = (defaultprops) => {
const [appBuilding, setAppBuilding] = useState(false);
const [fileDownloadEnabled, setFileDownloadEnabled] = useState(false);
const [actionAmount, setActionAmount] = useState(increaseAmount);
const [oauth2Type, setOauth2Type] = useState("application");
const [oauth2Scopes, setOauth2Scopes] = useState([]);
const [oauth2Type, setOauth2Type] = useState("delegated");
const [oauth2GrantType, setOauth2GrantType] = useState("client_credentials");
const defaultAuth = {
name: "",
type: "header",
@@ -1748,17 +1750,25 @@ const AppCreator = (defaultprops) => {
//console.log("FLOW-1: ", value)
const flowkey = value.flow === undefined ? "flows" : "flow";
//console.log("FLOW: ", value[flowkey])
const basekey = value[flowkey].authorizationCode !== undefined
? "authorizationCode"
: "implicit";
// Doesn't seem to be used for now
const basekey = value[flowkey].authorizationCode !== undefined ? "authorizationCode" : "implicit";
// Kind of fucked up, but it works for now?
if (value["x-grant-type"] !== undefined && value["x-grant-type"] !== null && value["x-grant-type"].length !== 0) {
setOauth2Type(value["x-grant-type"])
}
//console.log("FLOW2: ", value[flowkey][basekey])
if (value[flowkey] !== undefined && value[flowkey][basekey] !== undefined
) {
if (value[flowkey][basekey].authorizationUrl !== undefined && parameterName.length === 0) {
var newparamname = parameterName
if (value[flowkey][basekey].authorizationUrl !== undefined && value[flowkey][basekey].authorizationUrl !== null && value[flowkey][basekey].authorizationUrl.length !== 0 && parameterName.length === 0) {
setParameterName(value[flowkey][basekey].authorizationUrl);
// } else {
// setOauth2Type("application")
} else {
setOauth2Type("application")
}
var tokenUrl = "";
@@ -2519,6 +2529,14 @@ const AppCreator = (defaultprops) => {
},
},
};
//if (value[flowkey][basekey]["x-grant-type"] !== undefined && value[flowkey][basekey]["x-grant-type"] !== null && value[flowkey][basekey]["x-grant-type"].length !== 0) {
if (oauth2GrantType.length > 0) {
data.components.securitySchemes["Oauth2"]["x-grant-type"] = oauth2GrantType;
}
console.log("SECURITYSCHEMES: ", data.components);
}
if (setExtraAuth.length > 0) {
@@ -3082,7 +3100,7 @@ const AppCreator = (defaultprops) => {
},
}}
style={{ maxHeight: 80, overflowX: "hidden", overflowY: "auto" }}
placeholder="Available Oauth2 Scopes (enter to add)"
placeholder="Available Oauth2 Scopes"
color="primary"
fullWidth
value={oauth2Scopes}
@@ -5957,36 +5975,67 @@ const AppCreator = (defaultprops) => {
</Select>
</FormControl>
{authenticationOption === "Oauth2" ?
<FormControl style={{ marginLeft: 350, maxWidth: 200, }} variant="outlined">
<FormControl style={{ marginLeft: 310, maxWidth: 240, }} 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}
<div style={{display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between", }}>
<Typography variant="body2" style={{ marginTop: 10, marginRight: 10, }} color="textSecondary">Oauth2 type</Typography>
<Select
fullWidth
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>
</div>
{oauth2Type === "application" ?
<div style={{display: "flex", }}>
<Typography variant="body2" style={{ marginTop: 10, marginRight: 10, }} color="textSecondary">Grant Type</Typography>
<Select
fullWidth
label="Grant Type"
onChange={(e) => {
setOauth2GrantType(e.target.value);
}}
value={oauth2GrantType}
style={{
backgroundColor: inputColor,
color: "white",
height: "50px",
}}
>
{data}
</MenuItem>
))}
</Select>
{["client_credentials", "password"].map((data, index) => (
<MenuItem
key={index}
style={{ backgroundColor: inputColor, color: "white" }}
value={data}
>
{data}
</MenuItem>
))}
</Select>
</div>
: null}
</FormControl>
: null}
</span>
frontend/src/views/Dashboard.jsx
+72 -40
View File
@@ -102,6 +102,8 @@ const UsecaseListComponent = (props) => {
const [expandedItem, setExpandedItem] = useState(-1);
const [inputUsecase, setInputUsecase] = useState({});
const [prevSubcase, setPrevSubcase] = useState({})
const [editing, setEditing] = useState(false);
const [description, setDescription] = useState("");
const [video, setVideo] = useState("");
@@ -117,6 +119,42 @@ const UsecaseListComponent = (props) => {
const [mitreTags, setMitreTags] = useState([]);
const parseUsecase = (subcase) => {
const srcdata = findSpecificApp(frameworkData, subcase.type)
const dstdata = findSpecificApp(frameworkData, subcase.last)
if (srcdata !== undefined && srcdata !== null) {
subcase.srcimg = srcdata.large_image
subcase.srcapp = srcdata.name
}
if (dstdata !== undefined && dstdata !== null) {
subcase.dstimg = dstdata.large_image
subcase.dstapp = dstdata.name
}
return subcase
}
useEffect(() => {
console.log("In frameworkData useEffect: frameworkData: ", frameworkData)
if (frameworkData === undefined || prevSubcase === undefined) {
return
}
console.log("PAST!")
var parsedUsecase = inputUsecase
const subcase = parseUsecase(prevSubcase)
parsedUsecase.srcimg = subcase.srcimg
parsedUsecase.srcapp = subcase.srcapp
parsedUsecase.dstimg = subcase.dstimg
parsedUsecase.dstapp = subcase.dstapp
setInputUsecase(parsedUsecase)
}, [frameworkData])
const loadApps = () => {
fetch(`${globalUrl}/api/v1/apps`, {
method: "GET",
@@ -163,35 +201,14 @@ const UsecaseListComponent = (props) => {
if (keys === undefined || keys === null || keys.length === 0) {
return null
}
const parseUsecase = (subcase) => {
//console.log("parseUsecase: ", subcase)
const srcdata = findSpecificApp(frameworkData, subcase.type)
const dstdata = findSpecificApp(frameworkData, subcase.last)
if (srcdata !== undefined && srcdata !== null) {
subcase.srcimg = srcdata.large_image
subcase.srcapp = srcdata.name
}
if (dstdata !== undefined && dstdata !== null) {
subcase.dstimg = dstdata.large_image
subcase.dstapp = dstdata.name
}
return subcase
}
}
// Timeout 50ms to delay it slightly
const getUsecase = (subcase, index, subindex) => {
subcase = parseUsecase(subcase)
// Timeout 50ms to delay it slightly
//setTimeout(() => {
// setInputUsecase(subcase)
//}, 50)
setPrevSubcase(subcase)
fetch(`${globalUrl}/api/v1/workflows/usecases/${escape(subcase.name.replaceAll(" ", "_"))}`, {
method: "GET",
@@ -214,8 +231,6 @@ const UsecaseListComponent = (props) => {
if (responseJson.success === false) {
parsedUsecase = subcase
} else {
console.log("FOUND: ", JSON.parse(JSON.stringify(responseJson)))
parsedUsecase = responseJson
parsedUsecase.srcimg = subcase.srcimg
@@ -314,7 +329,7 @@ const UsecaseListComponent = (props) => {
})
.catch((error) => {
//toast(error.toString());
//setFrameworkLoaded(true)
//setFrameworkLoaded(true)
})
}
@@ -416,15 +431,16 @@ const UsecaseListComponent = (props) => {
return (
<Grid id={fixedName} item xs={selectedItem ? 12 : 4} key={subindex} style={{minHeight: 110,}} onClick={() => {
if (fixedName === "increase authentication") {
getUsecase(subcase, index, subindex)
return
}
//setSelectedWorkflows([])
if (selectedItem) {
} else {
getUsecase(subcase, index, subindex)
navigate(`/usecases?selected_object=${fixedName}`)
//const newitem = removeParam("selected_object", cursearch);
//navigate(curpath + newitem)
}
}}>
<Paper style={{padding: 25, minHeight: isCloud ? 75 : 122, cursor: !selectedItem ? "pointer" : "default", border: itemBorder, backgroundColor: backgroundColor,}} onClick={() => {
@@ -594,11 +610,12 @@ const UsecaseListComponent = (props) => {
>
<IconButton
style={{}}
index="close_selection"
onClick={(e) => {
setExpandedItem(-1)
setExpandedIndex(-1)
setEditing(false)
setInputUsecase({})
setExpandedItem(-1)
setExpandedIndex(-1)
setEditing(false)
setInputUsecase({})
}}
>
<CloseIcon style={{ color: "white" }} />
@@ -1172,13 +1189,28 @@ const Dashboard = (props) => {
if (foundQuery !== null && foundQuery !== undefined) {
setSelectedUsecaseCategory(foundQuery)
const newitem = removeParam("selected", cursearch);
const newitem = removeParam("selected", cursearch);
navigate(curpath + newitem)
}
const baseItem = document.getElementById("increase authentication")
if (baseItem !== undefined && baseItem !== null) {
baseItem.click()
// Find close window button -> go to top
const foundButton = document.getElementById("close_selection")
if (foundButton !== undefined && foundButton !== null) {
foundButton.click()
}
// Scroll back to top
window.scrollTo(0, 0)
}
const foundQuery2 = params["selected_object"]
if (foundQuery2 !== null && foundQuery2 !== undefined) {
//console.log("Got selected_object: ", foundQuery2)
// Take a random object, quickly click it, then go to this one
// Something is weird with loading apps without it
const queryName = foundQuery2.toLowerCase().replaceAll("_", " ")
// Waiting a bit for it to render
@@ -1198,7 +1230,7 @@ const Dashboard = (props) => {
} else {
//console.log("Couldn't find item with name ", queryName)
}
}, 100);
}, 1000);
}
}
@@ -1251,6 +1283,7 @@ const Dashboard = (props) => {
})
}
const getAvailableWorkflows = () => {
fetch(globalUrl + "/api/v1/workflows", {
method: "GET",
@@ -1385,8 +1418,7 @@ const Dashboard = (props) => {
useEffect(() => {
getAvailableWorkflows()
getFramework()
//fetchUsecases()
getFramework()
}, []);
const fetchdata = (stats_id) => {
frontend/src/views/Docs.jsx
+31 -95
View File
@@ -1,13 +1,11 @@
import React, { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";
import Markdown from 'react-markdown'
import { BrowserView, MobileView } from "react-device-detect";
import { useParams, useNavigate, Link } from "react-router-dom";
import { isMobile } from "react-device-detect";
import theme from '../theme.jsx';
import remarkGfm from 'remark-gfm'
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import {
Grid,
@@ -29,6 +27,8 @@ import {
import {
Link as LinkIcon,
Edit as EditIcon,
KeyboardArrowRight as KeyboardArrowRightIcon,
ExpandMore as ExpandMoreIcon,
} from "@mui/icons-material";
const Body = {
@@ -166,8 +166,11 @@ const Docs = (defaultprops) => {
})
.then((response) => response.json())
.then((responseJson) => {
if (responseJson.success) {
setData(responseJson.reason);
if (responseJson.success && responseJson.reason !== undefined) {
// Find <img> tags and translate them into ![]() format
const imgRegex = /<img.*?src="(.*?)"/g;
const newdata = responseJson.reason.replace(imgRegex, '![]($1)');
setData(newdata)
if (docId === undefined) {
document.title = "Shuffle documentation introduction";
} else {
@@ -376,7 +379,6 @@ const Docs = (defaultprops) => {
};
function OuterLink(props) {
console.log("Link: ", props.href)
if (props.href.includes("http") || props.href.includes("mailto")) {
return (
<a
@@ -402,7 +404,7 @@ const Docs = (defaultprops) => {
}
function CodeHandler(props) {
console.log("PROPS: ", props)
//console.log("Codehandler PROPS: ", props)
const propvalue = props.value !== undefined && props.value !== null ? props.value : props.children !== undefined && props.children !== null && props.children.length > 0 ? props.children[0] : ""
@@ -603,7 +605,6 @@ const Docs = (defaultprops) => {
const [hover, setHover] = useState(false);
console.log("Link: ", link)
if (link === undefined || link === null) {
return null
}
@@ -681,60 +682,20 @@ const Docs = (defaultprops) => {
<b>Organize.</b> Whether an organization of 1000 or 1, management tools are necessary. In Shuffle we offer full user management, MFA and single-signon options, multi-tenancy and a lot more - for free!
</Typography>
</div>
{/*
<Grid container spacing={2} style={{marginTop: 50, }}>
{list.map((data, index) => {
const item = data.name;
if (item === undefined) {
return null;
}
const path = "/docs/" + item;
const newname =
item.charAt(0).toUpperCase() +
item.substring(1).split("_").join(" ").split("-").join(" ");
const itemMatching = props.match.params.key === undefined ? false :
props.match.params.key.toLowerCase() === item.toLowerCase();
return (
<Grid key={index} item xs={4}>
<DocumentationButton key={index} item={newname} link={"/docs/"+data.name} />
</Grid>
)
})}
</Grid>
*/}
{/*
<TextField
required
style={{
flex: "1",
backgroundColor: theme.palette.inputColor,
height: 50,
}}
InputProps={{
style:{
color: "white",
height: 50,
},
}}
placeholder={"Search Knowledgebase"}
color="primary"
fullWidth={true}
type="firstname"
id={"Searchfield"}
margin="normal"
variant="outlined"
onChange={(event) => {
console.log("Change: ", event.target.value)
}}
/>
*/}
</div>
const markdownComponents = {
img: Img,
code: CodeHandler,
h1: Heading,
h2: Heading,
h3: Heading,
h4: Heading,
h5: Heading,
h6: Heading,
a: OuterLink,
}
// PostDataBrowser Section
const postDataBrowser =
list === undefined || list === null ? null : (
@@ -812,32 +773,22 @@ const Docs = (defaultprops) => {
mainpageInfo
:
<div id="markdown_wrapper_outer" style={markdownStyle}>
<ReactMarkdown
components={{
img: Img,
code: CodeHandler,
h1: Heading,
h2: Heading,
h3: Heading,
h4: Heading,
h5: Heading,
h6: Heading,
a: OuterLink,
}}
<Markdown
components={markdownComponents}
id="markdown_wrapper"
escapeHtml={false}
skipHtml={false}
style={{
maxWidth: "100%", minWidth: "100%",
}}
>
{data}
</ReactMarkdown>
</Markdown>
</div>
}
</div>
</div>
);
// remarkPlugins={[remarkGfm]}
const mobileStyle = {
color: "white",
@@ -849,6 +800,7 @@ const Docs = (defaultprops) => {
flexDirection: "column",
};
const postDataMobile =
list === undefined || list === null ? null : (
<div style={mobileStyle}>
@@ -899,18 +851,8 @@ const Docs = (defaultprops) => {
mainpageInfo
:
<div id="markdown_wrapper_outer" style={markdownStyle}>
<ReactMarkdown
components={{
img: Img,
code: CodeHandler,
h1: Heading,
h2: Heading,
h3: Heading,
h4: Heading,
h5: Heading,
h6: Heading,
a: OuterLink,
}}
<Markdown
components={markdownComponents}
id="markdown_wrapper"
escapeHtml={false}
style={{
@@ -918,7 +860,7 @@ const Docs = (defaultprops) => {
}}
>
{data}
</ReactMarkdown>
</Markdown>
</div>
}
<Divider
@@ -941,15 +883,9 @@ const Docs = (defaultprops) => {
</div>
);
//const imageModal =
// <Dialog modal
// open={imageModalOpen}
// </Dialog>
// {imageModal}
// Padding and zIndex etc set because of footer in cloud.
const loadedCheck = (
<div style={{ minHeight: 1000, paddingBottom: 100, zIndex: 50000, }}>
<div style={{ minHeight: 1000, paddingBottom: 100, zIndex: 50000, maxWidth: 1920, minWidth: 1366, margin: "auto", }}>
<BrowserView>{postDataBrowser}</BrowserView>
<MobileView>{postDataMobile}</MobileView>
</div>