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/WorkflowTemplatePopup.jsx
+61 -27
View File
@@ -4,6 +4,7 @@ import { toast } from "react-toastify"
import theme from '../theme.jsx';
import { useNavigate, Link, useParams } from "react-router-dom";
import AppSearchButtons from "../components/AppSearchButtons.jsx";
import { isMobile } from "react-device-detect";
import {
Button,
Typography,
@@ -27,7 +28,7 @@ import WorkflowTemplatePopup2 from "./WorkflowTemplatePopup.jsx";
import ConfigureWorkflow from "../components/ConfigureWorkflow.jsx";
const WorkflowTemplatePopup = (props) => {
const { userdata, appFramework, globalUrl, img1, srcapp, img2, dstapp, title, description, visualOnly, apps, isLoggedIn } = props;
const { userdata, appFramework, globalUrl, img1, srcapp, img2, dstapp, title, description, visualOnly, apps, isLoggedIn, isHomePage } = props;
const [isActive, setIsActive] = useState(false);
const [isHovered, setIsHovered] = useState(false);
@@ -40,14 +41,18 @@ const WorkflowTemplatePopup = (props) => {
const [missingSource, setMissingSource] = React.useState(undefined)
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";
let navigate = useNavigate();
const imagestyleWrapper = {
const imagestyleWrapper = {
height: 40,
width: 40,
borderRadius: 40,
border: "1px solid rgba(255,255,255,0.3)",
border: isHomePage ? null : "1px solid rgba(255,255,255,0.3)",
overflow: "hidden",
display: "flex",
}
@@ -56,7 +61,7 @@ const WorkflowTemplatePopup = (props) => {
height: 40,
width: 40,
borderRadius: 40,
border: "1px solid rgba(255,255,255,0.3)",
border: isHomePage ? null : "1px solid rgba(255,255,255,0.3)",
overflow: "hidden",
display: "flex",
}
@@ -65,13 +70,13 @@ const WorkflowTemplatePopup = (props) => {
height: 40,
width: 40,
borderRadius: 40,
border: "1px solid rgba(255,255,255,0.3)",
border: isHomePage ? null : "1px solid rgba(255,255,255,0.3)",
overflow: "hidden",
}
const imagestyleDefault = {
display: "block",
marginLeft: 11,
marginLeft: 12,
marginTop: 11,
height: 35,
width: "auto",
@@ -168,6 +173,7 @@ const WorkflowTemplatePopup = (props) => {
});
}
const getGeneratedWorkflow = () => {
// POST
// https://shuffler.io/api/v1/workflows/merge
@@ -183,15 +189,13 @@ const WorkflowTemplatePopup = (props) => {
if (srcapp.includes(":default")) {
setMissingSource({
"img": "https://shuffler.io/images/apps/" + srcapp + ".png",
"type": srcapp.split(":")[0],
})
}
if (dstapp.includes(":default")) {
setMissingDestination({
"name": dstapp,
"img": "https://shuffler.io/images/apps/" + dstapp + ".png",
"type": dstapp.split(":")[0],
})
}
@@ -200,7 +204,6 @@ const WorkflowTemplatePopup = (props) => {
setWorkflowLoading(true)
// FIXME: Remove hardcoding here after testing, and user srcapp/dstapp
const newsrcapp = srcapp
const newdstapp = dstapp
@@ -228,15 +231,21 @@ const WorkflowTemplatePopup = (props) => {
})
.then((response) => {
if (response.status !== 200) {
console.log("Status not 200 for framework!");
//console.log("Status not 200 for framework!");
}
setWorkflowLoading(false)
return response.json();
})
.then((responseJson) => {
if (responseJson.id !== undefined && responseJson.id !== null && responseJson.id !== "" && responseJson.name !== undefined && responseJson.name !== null && responseJson.name !== "") {
console.log("Success in workflow template (prebuilt): ", responseJson);
setWorkflow(responseJson)
return
}
if (responseJson.success === false) {
console.log("Error in workflow template: ", responseJson.error);
//console.log("Error in workflow template: ", responseJson.error);
setErrorMessage("Failed to generate workflow for these tools - the Shuffle team has been notified. Click out of this window to continue. Contact support@shuffler.io for further assistance.")
@@ -290,9 +299,9 @@ const WorkflowTemplatePopup = (props) => {
style: {
backgroundColor: "black",
color: "white",
minWidth: 700,
maxWidth: 700,
paddingTop: 75,
minWidth: isHomePage ? null : isMobile ? 300 : 700,
maxWidth: isHomePage ? null : isMobile ? 300 : 700,
paddingTop: isMobile ? null : 75,
itemAlign: "center",
},
}}
@@ -311,8 +320,8 @@ const WorkflowTemplatePopup = (props) => {
>
<CloseIcon />
</IconButton>
<DialogContent style={{marginTop: 0, marginLeft: 75, maxWidth: 470, }}>
<Typography variant="h4">
<DialogContent style={{marginTop: 0, marginLeft: isHomePage ? null : isMobile ? null : 75, maxWidth: 470, }}>
<Typography variant="h4" style={{ fontSize: isMobile ? 20 : null}}>
<b>Configure Workflow</b>
</Typography>
<Typography variant="body2" color="textSecondary" style={{marginTop: 25, }}>
@@ -343,16 +352,41 @@ const WorkflowTemplatePopup = (props) => {
</Typography>
</div>
}
{!isLoggedIn || missingSource === undefined ? null :
<div style={{marginTop: 75, }}>
{isLoggedIn && (missingSource !== undefined || missingDestination !== undefined) ?
<Typography variant="body1" style={{marginTop: 75, }}>
{"The following app category is required generate this workflow: "}
</Typography>
: null}
{(missingSource !== undefined) ?
<div style={{}}>
<AppSearchButtons
globalUrl={globalUrl}
appFramework={appFramework}
appType={missingSource.type}
appImage={missingSource.image}
setMissing={setMissingSource}
/>
</div>
}
: null}
{(missingDestination !== undefined) ?
<div style={{}}>
<AppSearchButtons
globalUrl={globalUrl}
appFramework={appFramework}
appType={missingDestination.type}
appImage={missingDestination.image}
setMissing={setMissingDestination}
/>
</div>
: null}
<ConfigureWorkflow
userdata={userdata}
theme={theme}
@@ -383,26 +417,26 @@ 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("_", " ") : ""
return (
<div style={{ display: "flex", maxWidth: isCloud ? 470 : 450, minWidth: isCloud ? 470 : 450, height: 78, borderRadius: 8 }}>
<div style={{ display: "flex", maxWidth: isCloud ? 470 : isMobile? null: 450, minWidth: isCloud ? 470 : isMobile? null: 450, height: 78, borderRadius: 8, }}>
<ModalView />
<div
// variant={isActive === 1 ? "contained" : "outlined"}
color="secondary"
disabled={visualOnly === true}
style={{
margin: 4,
margin: isHomePage ? isMobile ? null : 4 : 4 ,
width: "100%",
borderRadius: 8,
textTransform: "none",
backgroundColor: theme.palette.inputColor,
border: isActive ? errorMessage !== "" ? "1px solid red" : `2px solid ${theme.palette.green}` : isHovered ? "1px solid #f85a3e" : "1px solid rgba(33, 33, 33, 1)",
backgroundColor: isHomePage ? null : theme.palette.inputColor,
border: isHomePage ? null : isActive ? errorMessage !== "" ? "1px solid red" : `2px solid ${theme.palette.green}` : isHovered ? "1px solid #f85a3e" : "1px solid rgba(33, 33, 33, 1)",
cursor: isActive ? errorMessage !== "" ? "not-allowed" : "pointer" : "pointer",
padding: "10px 20px 10px 20px",
position: "relative",
@@ -465,10 +499,10 @@ const WorkflowTemplatePopup = (props) => {
}
</div>
<div style={{ flex: 3, marginLeft: 20, }}>
<Typography variant="body1" style={{ marginTop: parsedDescription.length === 0 ? 10 : 0, }} color="rgba(241, 241, 241, 1)">
<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={{ marginTop: 0, marginRight: 0, maxHeight: 16, 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",}} color="rgba(158, 158, 158, 1)">
{parsedDescription}
</Typography>
</div>