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/views/Admin.jsx
+47 -4
View File
@@ -980,6 +980,22 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
leads.push("customer")
}
if (responseJson.lead_info.old_customer) {
leads.push("old customer")
}
if (responseJson.lead_info.tech_partner) {
leads.push("tech partner")
}
if (responseJson.lead_info.creator) {
leads.push("creator")
}
if (responseJson.lead_info.opensource) {
leads.push("open source")
}
if (responseJson.lead_info.demo_done) {
leads.push("demo done")
}
@@ -2412,7 +2428,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", "pov", "demo done", "customer", "student", "internal"].map((name) => (
{["contacted", "lead", "pov", "demo done", "customer", "open source", "student", "internal", "old customer", "creator", "tech partner"].map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={selectedStatus.indexOf(name) > -1} />
<ListItemText primary={name} />
@@ -3000,7 +3016,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
curTab === 1 ? (
<div>
<div style={{ marginTop: 20, marginBottom: 20 }}>
<h2 style={{ display: "inline" }}>User management</h2>
<h2 style={{ display: "inline" }}>User Management</h2>
<span style={{ marginLeft: 25 }}>
Add, edit, block or change passwords.{" "}
<a
@@ -3080,7 +3096,11 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
) : null}
<ListItemText
primary="Actions"
style={{ minWidth: 180, maxWidth: 180 }}
style={{ minWidth: 100, maxWidth: 100, }}
/>
<ListItemText
primary="Last Login"
style={{ minWidth: 150, maxWidth: 150, }}
/>
</ListItem>
{users === undefined || users === null
@@ -3091,6 +3111,24 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
bgColor = "#1f2023";
}
const timeNow = new Date().getTime();
// Get the highest timestamp in data.login_info
var lastLogin = "N/A"
if (data.login_info !== undefined && data.login_info !== null) {
var loginInfo = 0
for (var i = 0; i < data.login_info.length; i++) {
if (data.login_info[i].timestamp > loginInfo) {
loginInfo = data.login_info[i].timestamp
}
}
if (loginInfo > 0) {
console.log("SETTING LAST LOGIN: " + loginInfo)
lastLogin = new Date(loginInfo * 1000).toISOString().slice(0, 10) + " (" + data.login_info.length + ")"
}
}
return (
<ListItem key={index} style={{ backgroundColor: bgColor }}>
<ListItemText
@@ -3242,7 +3280,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
}
/>
) : null}
<ListItemText style={{ display: "flex" }}>
<ListItemText style={{ display: "flex", minWidth: 100, maxWidth: 100, }}>
<IconButton
onClick={() => {
setSelectedUserModalOpen(true);
@@ -3300,6 +3338,11 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
New apikey
</Button>*/}
</ListItemText>
<ListItemText
style={{ minWidth: 150, maxWidth: 150, }}
primary={lastLogin}
><span/>
</ListItemText>
</ListItem>
);
})}
frontend/src/views/AngularWorkflow.jsx
+4 -1
View File
@@ -977,14 +977,17 @@ 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
if (executionModalOpen === true) {
console.log("Execution modal already open, not cleaning up")
return
}
const execution = responseJson.find((data) => data.execution_id === tmpView);
const execution = responseJson.executions.find((data) => data.execution_id === tmpView);
setExecutionModalOpen(true)
if (execution !== null && execution !== undefined) {
frontend/src/views/Dashboard.jsx
+21 -21
View File
@@ -170,9 +170,6 @@ const UsecaseListComponent = (props) => {
//console.log("parseUsecase: ", subcase)
const srcdata = findSpecificApp(frameworkData, subcase.type)
const dstdata = findSpecificApp(frameworkData, subcase.last)
//console.log("srcdata: ", srcdata)
//console.log("dstdata: ", dstdata)
if (srcdata !== undefined && srcdata !== null) {
subcase.srcimg = srcdata.large_image
@@ -192,9 +189,9 @@ const UsecaseListComponent = (props) => {
subcase = parseUsecase(subcase)
// Timeout 50ms to delay it slightly
setTimeout(() => {
setInputUsecase(subcase)
}, 50)
//setTimeout(() => {
// setInputUsecase(subcase)
//}, 50)
fetch(`${globalUrl}/api/v1/workflows/usecases/${escape(subcase.name.replaceAll(" ", "_"))}`, {
method: "GET",
@@ -212,12 +209,13 @@ const UsecaseListComponent = (props) => {
return response.json();
})
.then((responseJson) => {
//console.log("In responseJson for usecase: ", responseJson)
var parsedUsecase = responseJson
if (responseJson.success === false) {
parsedUsecase = subcase
} else {
console.log("FOUND: ", JSON.parse(JSON.stringify(responseJson)))
parsedUsecase = responseJson
parsedUsecase.srcimg = subcase.srcimg
@@ -417,7 +415,7 @@ const UsecaseListComponent = (props) => {
const fixedName = subcase.name.toLowerCase().replace("_", " ")
return (
<Grid id={fixedName} item xs={selectedItem ? 12 : 4} key={subindex} style={{minHeight: 110,}} onClick={() => {
<Grid id={fixedName} item xs={selectedItem ? 12 : 4} key={subindex} style={{minHeight: 110,}} onClick={() => {
//setSelectedWorkflows([])
if (selectedItem) {
@@ -887,21 +885,23 @@ const UsecaseListComponent = (props) => {
>
Try it out:
</Typography>
<WorkflowTemplatePopup
isLoggedIn={isLoggedIn}
appFramework={frameworkData}
userdata={userdata}
{frameworkData !== undefined && frameworkData !== null && Object.keys(frameworkData).length > 0 ?
<WorkflowTemplatePopup
isLoggedIn={isLoggedIn}
appFramework={frameworkData}
userdata={userdata}
globalUrl={globalUrl}
img1={inputUsecase.srcimg}
srcapp={inputUsecase.srcapp}
img2={inputUsecase.dstimg}
dstapp={inputUsecase.dstapp}
title={inputUsecase.name}
description={inputUsecase.description}
globalUrl={globalUrl}
img1={inputUsecase.srcimg}
srcapp={inputUsecase.srcapp}
img2={inputUsecase.dstimg}
dstapp={inputUsecase.dstapp}
title={inputUsecase.name}
description={inputUsecase.description}
apps={apps}
/>
apps={apps}
/>
: null}
</span>
{/*
frontend/src/views/Search.jsx
+19 -18
View File
@@ -21,20 +21,13 @@ import {
} from "@mui/icons-material";
const bodyDivStyle = {
margin: "auto",
maxWidth: 1024,
scrollX: "hidden",
overflowX: "hidden",
}
// Should be different if logged in :|
const Search = (props) => {
const { globalUrl, isLoaded, serverside, userdata, hidemargins, } = props;
const { globalUrl, isLoaded, serverside, userdata, hidemargins, isHeader} = props;
let navigate = useNavigate();
const [curTab, setCurTab] = useState(0);
const iconStyle = { marginRight: 10 };
const iconStyle = { marginRight: isHeader ? null : 10 };
useEffect(() => {
if (serverside !== true && window.location.search !== undefined && window.location.search !== null) {
@@ -58,15 +51,23 @@ const Search = (props) => {
return null
}
const bodyDivStyle = {
margin: "auto",
maxWidth: 1024,
scrollX: "hidden",
overflowX: "hidden",
justifyContent: isHeader ? "center" : null,
}
const boxStyle = {
color: "white",
flex: "1",
marginLeft: 10,
marginRight: 10,
paddingLeft: 30,
paddingRight: 30,
paddingBottom: 30,
paddingTop: hidemargins === true ? 0 : 30,
marginLeft: isHeader ? null : 10,
marginRight: isHeader ? null : 10,
paddingLeft: isHeader ? null : 30,
paddingRight: isHeader ? null : 30,
paddingBottom: isHeader ? null : 30,
paddingTop: hidemargins === true ? 0 : isHeader ? null : 30,
display: "flex",
flexDirection: "column",
overflowX: "hidden",
@@ -121,7 +122,7 @@ const Search = (props) => {
<div style={{paddingBottom: hidemargins === true ? 0 : 100, color: "white", }}>
<div style={boxStyle}>
<Tabs
style={{width: 610, margin: "auto", marginTop: hidemargins === true ? 0 : 25, }}
style={{width: isHeader ? 765 : 610, margin: isHeader? null :"auto", marginTop: hidemargins === true ? 0 : isHeader ? null : 25, }}
value={curTab}
indicatorColor="primary"
textColor="secondary"
@@ -152,7 +153,7 @@ const Search = (props) => {
/>
</Tabs>
{curTab === 0 ?
<AppGrid maxRows={3} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
<AppGrid maxRows={3} isHeader={true} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
:
curTab === 1 ?
window.location.pathname === "/search" ?
@@ -164,7 +165,7 @@ const Search = (props) => {
<DocsGrid maxRows={6} parsedXs={12} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
:
curTab === 3 ?
<CreatorGrid parsedXs={4} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
<CreatorGrid parsedXs={4} isHeader={true} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
:
null}
</div>
frontend/src/views/Welcome.jsx
+21 -69
View File
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import ReactGA from 'react-ga4';
import WelcomeForm2 from "../components/WelcomeForm2.jsx";
import AppFramework from "../components/AppFramework.jsx";
import {isMobile} from "react-device-detect";
import {
ArrorForwardIos as ArrowForwardIosIcon,
} from '@mui/icons-material';
@@ -269,22 +269,22 @@ const Welcome = (props) => {
getApps()
getAvailableWorkflows()
if (
window.location.search !== undefined &&
window.location.search !== null
) {
if (window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
const foundTab = params["tab"];
// Make foundtab into a number
console.log("foundTab: ", foundTab, activeStep+1)
if (foundTab !== null && foundTab !== undefined && !isNaN(foundTab) && foundTab >= 1 && foundTab <= 3) {
console.log("SETTING TAB TO: ", foundTab)
setShowWelcome(true)
if (foundTab === 3 || foundTab === "3") {
handleSetSearch(usecaseButtons[0].name, usecaseButtons[0].usecase)
}
setActiveStep(foundTab-1)
} else {
navigate(`/welcome?tab=2`)
}
}
}, [])
@@ -297,8 +297,8 @@ const Welcome = (props) => {
flex: 1,
padding: 0,
textAlign: "center",
maxWidth: 275,
minWidth: 275,
maxWidth: isMobile ? null : 275,
minWidth: isMobile ? null : 275,
backgroundColor: theme.palette.surfaceColor,
color: "white",
borderRadius: theme.palette.borderRadius,
@@ -323,7 +323,7 @@ const Welcome = (props) => {
const buttonStyle = {
borderRadius: 200,
height: 51,
width: 464,
width: isMobile ? 300 : 464,
fontSize: 16,
// background: "linear-gradient(89.83deg, #FF8444 0.13%, #F2643B 99.84%)",
background: "linear-gradient(90deg, #F86744 0%, #F34475 100%)",
@@ -331,7 +331,7 @@ const Welcome = (props) => {
top: 105,
margin: "auto",
itemAlign: "center",
marginLeft: "65px",
marginLeft: isMobile? null : "65px",
}
const defaultImage = "/images/experienced.png"
@@ -379,7 +379,7 @@ const Welcome = (props) => {
})}
</Stepper>
</div> */}
<Grid container spacing={1} style={{ padding: 0, maxWidth: 500, minWidth: 500, marginRight : "auto" , marginLeft: "auto" }}>
<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>
{/*
@@ -391,6 +391,7 @@ const Welcome = (props) => {
/>
*/}
<WelcomeForm2
isLoggedIn={isLoggedIn}
checkLogin={checkLogin}
userdata={userdata}
globalUrl={globalUrl}
@@ -414,49 +415,11 @@ const Welcome = (props) => {
/>
</div>
</Grid>
{/* {frameworkData === undefined || window.location.href.includes("tab=1") || window.location.href.includes("tab=3") ? null :
<div style={{marginTop: 25, }}>
<Typography variant="h6" style={{textAlign: "center", marginBottom: 25, }}>
App Framework
</Typography>
<Fade>
<AppFramework
inputUsecase={inputUsecase}
frameworkData={frameworkData}
setFrameworkData={setFrameworkData}
selectedOption={"Draw"}
showOptions={false}
isLoaded={true}
isLoggedIn={true}
globalUrl={globalUrl}
size={0.78}
color={theme.palette.backgroundColor}
discoveryWrapper={discoveryWrapper}
setDiscoveryWrapper={setDiscoveryWrapper}
apps={apps}
inputUsecases={usecases}
setInputUsecases={setUsecases}
/>
</Fade>
</div>
} */}
</Grid>
</div>
:
<Fade in={true}>
<div style={{maxWidth: 590, margin: "auto", marginTop: 50, }}>
{/* <div style={{display:"flex"}}>
<ArrowBackIosIcon style={{color: "#9E9E9E", width: "16px",}} onClick={() => {
navigate("/workflows")
}}/>
<Typography variant="h8" style={{color: "#9E9E9E",textAlign: "center", marginBottom: 20, paddingRight: "366px"}} onClick={() => {
navigate("/workflows")
}}>
Back
</Typography>
</div> */}
<div style={{maxWidth: isMobile ? null : 590, margin: "auto", marginTop: 50, }}>
<Typography variant="h4" style={{color: "#F1F1F1", marginTop: 50, fontSize: 32}}>
Help us get to know you
</Typography>
@@ -466,7 +429,7 @@ const Welcome = (props) => {
{/* <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: "flex", marginTop: 70, width: 700, margin: "auto",}}>
<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) {
@@ -479,6 +442,7 @@ const Welcome = (props) => {
//setActiveStep(1)
}
navigate("/welcome?tab=2")
setShowWelcome(true)
}}>
<CardActionArea style={actionObject}>
@@ -487,12 +451,13 @@ const Welcome = (props) => {
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
Let us guide you for an easier experience
</Typography>
</CardActionArea>
</Card>
</div>
<div style={{marginLeft: 25, marginRight: 25, }}>
<div style={{marginLeft: 25, marginRight: 25,
marginTop: isMobile ? 30 : null, }}>
{/* <Typography style={{marginTop: 200, }}>
OR
</Typography> */}
@@ -521,10 +486,11 @@ const Welcome = (props) => {
</div>
<div style={{ flexDirection: "row", }}>
<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",
@@ -534,20 +500,6 @@ const Welcome = (props) => {
Continue
</Button>
</div>
{/* <div style={{margin: "auto", borderRadius: theme.palette.borderRadius, marginTop: 50, width: 200, overflow: "wrap", padding: 25, cursor: "pointer", }} onClick={() => {
if (window.drift !== undefined) {
window.drift.api.startInteraction({ interactionId: 340045 })
} else {
console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
}
}}>
<Typography variant="body1" style={{margin: "auto", textAlign: "center"}}>
Want a demo instead?
</Typography>
</div> */}
</div>
</Fade>
}