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

A tons of minor fixes for the onboarding flow and search systems

Browse Source
This commit is contained in:
Frikky
2023-11-06 08:32:58 +01:00
parent 492c3c3258
commit cf4aa71f80
18 changed files with 799 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AppSelection.jsx
+166 -140
View File
@@ -2,7 +2,7 @@ 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 { 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';
@@ -60,6 +60,117 @@ const AppSelection = props => {
let navigate = useNavigate();
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
useEffect(() => {
if (newSelectedApp === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID.length === 0) {
return
}
const submitNewApp = {
description: newSelectedApp.description,
id: newSelectedApp.objectID,
large_image: newSelectedApp.image_url,
name: newSelectedApp.name,
type: discoveryData
}
if (discoveryData === "CASES") {
appFramework.cases = submitNewApp
}
else if (discoveryData === "SIEM") {
appFramework.siem = submitNewApp
}
else if (discoveryData === "ERADICATION") {
appFramework.edr = submitNewApp
}
else if (discoveryData === "INTEL") {
appFramework.intel = submitNewApp
}
else if (discoveryData === "EMAIL") {
appFramework.communication = submitNewApp
}
else if (discoveryData === "NETWORK") {
appFramework.network = submitNewApp
}
else if (discoveryData === "ASSETS") {
appFramework.assets = submitNewApp
}
else if (discoveryData === "IAM") {
appFramework.iam = submitNewApp
}
setFrameworkItem(submitNewApp);
setSelectionOpen(false);
console.log("Selected app changed (effect)");
}, [newSelectedApp]);
useEffect(() => {
var tempApps = []
if (tempApps.length === 0) {
// Object.entries(appFramework).forEach(([key, value]) => {
// 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
}
Object.entries(appFramework).forEach(([key, value]) => {
if (key.toLowerCase() === "other" || key.toLowerCase() === "communication") {
return
}
value.type = key;
if (endTypes.includes(value.type.toLowerCase())) {
lastApps[value.type] = value
return
}
if (lastPosted.type === value.type) {
value = lastPosted
}
tempApps.push(JSON.parse(JSON.stringify(value)));
});
tempApps.sort((a, b) => {
if (a.type.length > b.type.length) {
return -1;
} else if (a.type.length < b.type.length) {
return 1;
}
});
let lastType = lastPosted.type === undefined ? "" : lastPosted.type.toLowerCase()
if (endTypes.includes(lastType)) {
lastApps[lastPosted.type] = lastPosted
}
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"])))
}
setAppButtons(tempApps)
console.log("Updated appButtons: ", appButtons)
GetApps()
}
}, [lastPosted, moreButton])
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)
@@ -157,9 +268,6 @@ const AppSelection = props => {
}
const onNodeSelect = (label) => {
// if (setDiscoveryWrapper !== undefined) {
// setDiscoveryWrapper({ id: label });
// }
if (isCloud) {
ReactGA.event({
category: "welcome",
@@ -168,116 +276,16 @@ const AppSelection = props => {
});
}
console.log("NODESELECT: ", label)
setDiscoveryData(label)
setSelectionOpen(true)
setNewSelectedApp({})
setDefaultSearch(label.charAt(0).toUpperCase() + (label.substring(1)).toLowerCase())
setNewSelectedApp(undefined)
};
useEffect(() => {
if (newSelectedApp.objectID === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID.length === 0) {
return
}
const submitNewApp = {
description: newSelectedApp.description,
id: newSelectedApp.objectID,
large_image: newSelectedApp.image_url,
name: newSelectedApp.name,
type: discoveryData
}
if (discoveryData === "CASES") {
appFramework.cases = submitNewApp
}
else if (discoveryData === "SIEM") {
appFramework.siem = submitNewApp
}
else if (discoveryData === "ERADICATION") {
appFramework.edr = submitNewApp
}
else if (discoveryData === "INTEL") {
appFramework.intel = submitNewApp
}
else if (discoveryData === "EMAIL") {
appFramework.communication = submitNewApp
}
else if (discoveryData === "NETWORK") {
appFramework.network = submitNewApp
}
else if (discoveryData === "ASSETS") {
appFramework.assets = submitNewApp
}
else if (discoveryData === "IAM") {
appFramework.iam = submitNewApp
}
setFrameworkItem(submitNewApp);
setSelectionOpen(false);
console.log("Selected app changed (effect)");
}, [newSelectedApp]);
useEffect(() => {
var tempApps = []
if (tempApps.length === 0) {
// Object.entries(appFramework).forEach(([key, value]) => {
// 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
}
Object.entries(appFramework).forEach(([key, value]) => {
if (key.toLowerCase() === "other" || key.toLowerCase() === "communication") {
return
}
value.type = key;
if (endTypes.includes(value.type.toLowerCase())) {
lastApps[value.type] = value
return
}
if (lastPosted.type === value.type) {
value = lastPosted
}
tempApps.push(value);
});
tempApps.sort((a, b) => {
if (a.type.length > b.type.length) {
return -1;
} else if (a.type.length < b.type.length) {
return 1;
}
});
let lastType = lastPosted.type === undefined ? "" : lastPosted.type.toLowerCase()
if (endTypes.includes(lastType)) {
lastApps[lastPosted.type] = lastPosted
}
if (moreButton) {
tempApps.push(lastApps["network"])
tempApps.push(lastApps["assets"])
tempApps.push(lastApps["iam"])
}
setAppButtons(tempApps)
console.log("Updated appButtons: ", appButtons)
GetApps()
}
}, [lastPosted, moreButton])
// const sizing = moreButton ? 510 : 480;
const buttonWidth = 450;
@@ -286,7 +294,7 @@ const AppSelection = props => {
borderRadius: 200,
marginTop: moreButton ? 44 : "",
height: 51,
width: 500,
width: isMobile ? 250 : 500,
fontSize: 16,
background: "linear-gradient(90deg, #F86744 0%, #F34475 100%)",
padding: "16px 24px",
@@ -301,14 +309,15 @@ const AppSelection = props => {
// minHeight: sizing,
// maxHeight: sizing,
marginTop: 10,
width: 500,
marginBottom: 25
width: isMobile ? 380 : 500,
marginBottom: 25,
textAlign: isMobile ? "center" : null,
}}
>
{selectionOpen ? (
<div
style={{
width: 319,
width: isMobile ? 225 : 319,
height: 395,
flexShrink: 0,
marginLeft: 70,
@@ -398,7 +407,7 @@ const AppSelection = props => {
variant="h4"
style={{
marginLeft: 8,
marginTop: 40,
marginTop: isMobile ? null : 40,
marginRight: 30,
marginBottom: 0,
}}
@@ -419,42 +428,59 @@ const AppSelection = props => {
Select the apps you work with and we will connect the for you.
</Typography>
<Grid rowSpacing={1} columnSpacing={2} container >
{appButtons.map((appData, index) => {
{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)
const appName = appData.name
const AppImage = appData.large_image
const appType = appData.type
appData = {
"count": 0,
"description": "",
"id": "",
"large_image": "",
"name": "",
"type": 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}
/>
)
})}
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}
/>
)
})}
</Grid>
</div>
{!moreButton ? (
<div style={{width: "100%", marginLeft: 200, marginBottom: 20}}>
<div style={{width: "100%", marginLeft: isMobile ? 100 : 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", }}>
<div style={{ flexDirection: "row", width: isMobile ? 380 : null, textAlign: isMobile ? "center" : null}}>
<Button variant="contained" type="submit" fullWidth style={bottomButtonStyle} onClick={() => {
navigate("/welcome?tab=3")
setActiveStep(2)