shaffuru files sync
This commit is contained in:
Lalit Deore
+184
-82
@@ -4,7 +4,7 @@ import WelcomeForm2 from "../components/WelcomeForm2.jsx";
|
||||
import AppFramework from "../components/AppFramework.jsx";
|
||||
import {isMobile} from "react-device-detect";
|
||||
import {
|
||||
ArrowForwardIos as ArrowForwardIosIcon,
|
||||
HelpOutline as HelpOutlineIcon,
|
||||
} from '@mui/icons-material';
|
||||
|
||||
import {
|
||||
@@ -20,13 +20,17 @@ import {
|
||||
Stepper,
|
||||
Step,
|
||||
StepLabel,
|
||||
Tooltip,
|
||||
} from '@mui/material';
|
||||
import theme from '../theme.jsx';
|
||||
import { useNavigate, Link } from "react-router-dom";
|
||||
import { getTheme } from '../theme.jsx';
|
||||
import { useNavigate, Link, useLocation } from "react-router-dom";
|
||||
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
||||
import Drift from "react-driftjs";
|
||||
import { Context } from "../context/ContextApi.jsx";
|
||||
|
||||
const Welcome = (props) => {
|
||||
const { themeMode } = React.useContext(Context);
|
||||
const theme = getTheme(themeMode);
|
||||
const { globalUrl, surfaceColor, newColor, mini, inputColor, userdata, isLoggedIn, isLoaded, serverside, checkLogin } = props;
|
||||
const [skipped, setSkipped] = React.useState(new Set());
|
||||
const [inputUsecase, setInputUsecase] = useState({});
|
||||
@@ -41,6 +45,8 @@ const Welcome = (props) => {
|
||||
const [workflows, setWorkflows] = React.useState([]);
|
||||
|
||||
let navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
if (checkLogin !== undefined) {
|
||||
checkLogin()
|
||||
@@ -268,9 +274,11 @@ const Welcome = (props) => {
|
||||
getFramework()
|
||||
getApps()
|
||||
getAvailableWorkflows()
|
||||
}, [])
|
||||
|
||||
if (window.location.search !== undefined && window.location.search !== null) {
|
||||
const urlSearchParams = new URLSearchParams(window.location.search);
|
||||
useEffect(() => {
|
||||
if (location.search !== undefined && location.search !== null) {
|
||||
const urlSearchParams = new URLSearchParams(location.search);
|
||||
const params = Object.fromEntries(urlSearchParams.entries());
|
||||
const foundTab = params["tab"];
|
||||
|
||||
@@ -288,9 +296,13 @@ const Welcome = (props) => {
|
||||
|
||||
//setRenderDone(
|
||||
|
||||
} else {
|
||||
setShowWelcome(false)
|
||||
}
|
||||
} else {
|
||||
setShowWelcome(false)
|
||||
}
|
||||
}, [])
|
||||
}, [location.search])
|
||||
|
||||
const isStepSkipped = step => {
|
||||
return skipped.has(step)
|
||||
@@ -339,6 +351,59 @@ const Welcome = (props) => {
|
||||
|
||||
const defaultImage = "/images/experienced.png"
|
||||
const experienced_image = userdata !== undefined && userdata !== null && userdata.active_org !== undefined && userdata.active_org.image !== undefined && userdata.active_org.image !== null && userdata.active_org.image !== "" ? userdata.active_org.image : defaultImage
|
||||
|
||||
const welcomeCardsOptions = [
|
||||
{
|
||||
badge: "New easy setup",
|
||||
title: "Shuffle Security",
|
||||
subtitle: "Set security specific usecases automatically",
|
||||
icon: (
|
||||
<svg width="50" height="50" viewBox="0 0 56 56" fill="none">
|
||||
<path d="M14 14h28v6H20v16h16v-10h-8v-6h14v22H14V14z" fill="#FF6600" />
|
||||
</svg>
|
||||
),
|
||||
onClick: () => {
|
||||
if (isCloud) {
|
||||
ReactGA.event({
|
||||
category: "welcome",
|
||||
action: "click_shuffle_security",
|
||||
label: "",
|
||||
})
|
||||
|
||||
navigate("https://security.shuffler.io/onboarding?utm_source=shuffler_onboarding")
|
||||
} else {
|
||||
// Default new port is 3002/3444
|
||||
const { protocol, hostname } = window.location;
|
||||
var newPort = 3002;
|
||||
if (protocol === "https") {
|
||||
newPort = 3444
|
||||
}
|
||||
|
||||
const newUrl = `${protocol}//${hostname}:${newPort}/onboarding`;
|
||||
window.location.href = newUrl;
|
||||
}
|
||||
|
||||
},
|
||||
tooltip: "Automate your security operations with built-in use cases.",
|
||||
},
|
||||
{
|
||||
title: "Shuffle Core",
|
||||
subtitle: "Build my workflows manually or with templates.",
|
||||
icon: <img src="/images/Shuffle_logo.png" alt="Shuffle" style={{width: 30, height: 30, objectFit: "contain"}} />,
|
||||
onClick: () => {
|
||||
if (isCloud) {
|
||||
ReactGA.event({
|
||||
category: "welcome",
|
||||
action: "click_shuffle_infrastructure",
|
||||
label: "",
|
||||
})
|
||||
}
|
||||
navigate("/welcome?tab=2")
|
||||
},
|
||||
tooltip: "Create custom workflows tailored to your specific infrastructure.",
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ margin: "auto", paddingBottom: 150, minHeight: 1500, paddingTop: 50, }}>
|
||||
{/*
|
||||
@@ -382,6 +447,33 @@ const Welcome = (props) => {
|
||||
})}
|
||||
</Stepper>
|
||||
</div> */}
|
||||
<div style={{ maxWidth: isMobile ? null : 500, margin: "auto", display: "flex", justifyContent: "flex-start", marginTop: isCloud ? "auto" : 20, marginBottom: -30 }}>
|
||||
<Button
|
||||
startIcon={<ArrowBackIosIcon />}
|
||||
onClick={() => {
|
||||
setShowWelcome(false);
|
||||
navigate("/welcome");
|
||||
}}
|
||||
style={{ color: theme.palette.text.secondary, textTransform: "none", fontSize: 16 }}
|
||||
disableRipple={true}
|
||||
sx={{
|
||||
'&:hover': {
|
||||
backgroundColor: 'transparent',
|
||||
color: theme.palette.text.primary,
|
||||
fontWeight: 'inherit',
|
||||
border: 'none',
|
||||
'& .MuiButton-startIcon': {
|
||||
transform: 'translateX(-4px)',
|
||||
}
|
||||
},
|
||||
'& .MuiButton-startIcon': {
|
||||
transition: 'transform 0.2s ease-in-out',
|
||||
}
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
<Grid container spacing={1} style={{ padding: isMobile ? 10 : 0, maxWidth: isMobile ? null : 500, minWidth: isMobile ? null : 500, marginRight : "auto" , marginLeft: "auto" }}>
|
||||
<Grid item xs={window.location.href.includes("tab=2") ? 6 : 12}>
|
||||
<div>
|
||||
@@ -423,87 +515,97 @@ const Welcome = (props) => {
|
||||
</div>
|
||||
:
|
||||
<Fade in={true}>
|
||||
<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
|
||||
<div style={{maxWidth: isMobile ? null : 620, margin: "auto", marginTop: 70, padding: isMobile ? "0 16px" : 0}}>
|
||||
<Typography variant="h4" style={{color: theme.palette.textColor, marginTop: 50, fontSize: isMobile ? 26 : 34, fontWeight: 700, lineHeight: 1.25}}>
|
||||
What do you want to do with Shuffle?
|
||||
</Typography>
|
||||
<Typography variant="body1" style={{color: "#9E9E9E", marginTop: 12 ,marginBottom: 50, fontSize: 16}}>
|
||||
Let us help you create a smoother journey.
|
||||
<Typography variant="body1" style={{color: theme.palette.welcomeCardSubtextColor, marginTop: 12, marginBottom: 36, fontSize: 16, fontFamily: theme?.typography?.fontFamily}}>
|
||||
Let us help you create a smoother journey.
|
||||
</Typography>
|
||||
{/* <Typography variant="body1" style={{color: "#9E9E9E", marginTop: 12 ,marginBottom: 50, fontSize: 16}}>
|
||||
We will use this information to personalize your automation
|
||||
</Typography> */}
|
||||
<div style={{display: isMobile ? null : "flex", marginTop: 70, width: isMobile ? 280 : 700, margin: "auto",}}>
|
||||
<div style={{border: "2px solid #806BFF", borderRadius: theme.palette?.borderRadius, }}>
|
||||
<Card style={paperObject} onClick={() => {
|
||||
if (isCloud) {
|
||||
ReactGA.event({
|
||||
category: "welcome",
|
||||
action: "click_welcome_continue",
|
||||
label: "",
|
||||
})
|
||||
} else {
|
||||
//setActiveStep(1)
|
||||
}
|
||||
|
||||
navigate("/welcome?tab=2")
|
||||
setActiveStep(1)
|
||||
setShowWelcome(true)
|
||||
}}>
|
||||
<CardActionArea style={actionObject}>
|
||||
<img src="/images/welcome-to-shuffle.png" style={imageStyle} />
|
||||
<Typography variant="h4" style={{color: "#F1F1F1"}}>
|
||||
New to Shuffle
|
||||
</Typography>
|
||||
<Typography variant="body1" style={{marginTop: 10, color: "rgba(255,255,255,0.8)"}}>
|
||||
Let us guide you for an easier experience
|
||||
</Typography>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
</div>
|
||||
<div style={{marginLeft: 25, marginRight: 25,
|
||||
marginTop: isMobile ? 30 : null, }}>
|
||||
{/* <Typography style={{marginTop: 200, }}>
|
||||
OR
|
||||
</Typography> */}
|
||||
</div>
|
||||
<Card disabled style={paperObject} onClick={() => {
|
||||
if (isCloud) {
|
||||
ReactGA.event({
|
||||
category: "welcome",
|
||||
action: "click_getting_started",
|
||||
label: "",
|
||||
})
|
||||
}
|
||||
<div style={{display: "flex", flexDirection: "column", gap: 20, marginTop : 50}}>
|
||||
|
||||
navigate("/workflows?message=Skipped intro")
|
||||
}}>
|
||||
<CardActionArea style={actionObject}>
|
||||
<img src={experienced_image} style={{padding: experienced_image === defaultImage ? 2 : 10, objectFit: "scale-down", minHeight: experienced_image === defaultImage ? 40 : 70, maxHeight: experienced_image === defaultImage ? 40 : 70, bordeRadius: theme.palette?.borderRadius*2, marginBottom: experienced_image === defaultImage ? 24 : 2 }} />
|
||||
<Typography variant="h4" style={{color: "#F1F1F1"}}>
|
||||
Experienced
|
||||
</Typography>
|
||||
<Typography variant="body1" style={{marginTop: 10, color: "rgba(255,255,255,0.8)"}}>
|
||||
Head to Shuffle right away
|
||||
</Typography>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
</div>
|
||||
{welcomeCardsOptions.map((card) => (
|
||||
<div key={card?.title?.replace(" ", "-")} style={{position: "relative"}}>
|
||||
{card.badge && (
|
||||
<div style={{
|
||||
position: "absolute",
|
||||
top: -14,
|
||||
left: 18,
|
||||
backgroundColor: "#F2653B",
|
||||
color: "#fff",
|
||||
borderRadius: 20,
|
||||
padding: "4px 14px",
|
||||
fontSize: 13,
|
||||
fontWeight: 600,
|
||||
zIndex: 1,
|
||||
letterSpacing: "0.01em",
|
||||
}}>
|
||||
{card.badge}
|
||||
</div>
|
||||
)}
|
||||
<Card
|
||||
style={{
|
||||
backgroundColor: theme.palette.platformColor,
|
||||
backgroundImage: "none",
|
||||
borderRadius: 8,
|
||||
boxShadow: "none",
|
||||
}}
|
||||
onClick={card.onClick}
|
||||
>
|
||||
<CardActionArea
|
||||
style={{
|
||||
padding: "20px 20px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
borderRadius: 12,
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div style={{display: "flex", alignItems: "center", gap: 18}}>
|
||||
<div style={{
|
||||
width: 52,
|
||||
height: 52,
|
||||
minWidth: 52,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: 10,
|
||||
}}>
|
||||
{card.icon}
|
||||
</div>
|
||||
<div style={{textAlign: "left"}}>
|
||||
<Typography style={{color: theme.palette?.actionSidebarField?.color, fontWeight: 700, fontSize: 18, lineHeight: 1.3}}>
|
||||
{card.title}
|
||||
</Typography>
|
||||
<Typography style={{color: theme.palette.welcomeCardSubtextColor, fontSize: 13, marginTop: 6}}>
|
||||
{card.subtitle}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<Tooltip title={card.tooltip} placement="right"
|
||||
componentsProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
backgroundColor: "rgba(33, 33, 33, 1)",
|
||||
color: "rgba(241, 241, 241, 1)",
|
||||
fontSize: 14,
|
||||
border: "1px solid rgba(73, 73, 73, 1)",
|
||||
fontFamily: theme?.typography?.fontFamily,
|
||||
}
|
||||
},
|
||||
}}
|
||||
arrow>
|
||||
<div style={{ position: "absolute", top: 16, right: 16, display: "flex", alignItems: "center", justifyContent: "center" }}>
|
||||
<HelpOutlineIcon style={{color: theme.palette.welcomeCardSubtextColor, fontSize: 22}} />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
|
||||
|
||||
<div style={{ flexDirection: "row", textAlign: isMobile ? "center" : null, margin: isMobile ? "auto" : null }}>
|
||||
<Button variant="contained" type="submit" fullWidth style={buttonStyle} onClick={() => {
|
||||
navigate(`/welcome?tab=2`)
|
||||
setActiveStep(1)
|
||||
setShowWelcome(true)
|
||||
ReactGA.event({
|
||||
category: "welcome",
|
||||
action: "click_welcome_continue",
|
||||
label: "",
|
||||
})
|
||||
}}>
|
||||
Continue
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Fade>
|
||||
|
||||
Reference in New Issue
Block a user