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

Merge pull request #1570 from Monilprajapati/newAppPage

Browse Source 
New app page
This commit is contained in:
Frikky
2024-12-02 15:01:34 +01:00
committed by GitHub
parent ed71bec7da 899bde4947
commit 022c3ae552
4 changed files with 1622 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AppModal.jsx
+80 -50
View File
@@ -291,11 +291,23 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
fullWidth fullWidth
PaperProps={{ PaperProps={{
sx: { sx: {
borderRadius: 3, borderRadius: 2,
border: "1px solid var(--Container-Stroke, #494949)", border: "1px solid #494949",
backgroundColor: "var(--Container, #212121)",
minWidth: '440px', minWidth: '440px',
fontFamily: "Inter" fontFamily: "Inter",
backgroundColor: "#212121",
'& .MuiDialogContent-root': {
backgroundColor: "#212121",
},
'& .MuiDialogTitle-root': {
backgroundColor: "#212121",
},
'& .MuiTypography-root': {
fontFamily: 'Inter, sans-serif',
},
'& .MuiButton-root': {
fontFamily: 'Inter, sans-serif',
},
} }
}} }}
> >
@@ -304,27 +316,29 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
pb: 1, pb: 2,
pt: 2, pt: 2,
px: 3 pl: 3,
pr: 2,
fontFamily: "Inter"
}} }}
> >
<Typography variant="h5" component="div" sx={{ fontWeight: 500 }}> <Typography component="div" sx={{ fontWeight: 500, color: "#F1F1F1", fontSize: "22px" }}>
About Gmail About {app?.name.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase())}
</Typography> </Typography>
<IconButton <IconButton
onClick={onClose} onClick={onClose}
sx={{ sx={{
color: 'text.secondary', color: 'rgba(255, 255, 255, 0.7)',
'&:hover': { bgcolor: 'action.hover' } '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' }
}} }}
> >
<CloseIcon /> <CloseIcon />
</IconButton> </IconButton>
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent sx={{ py: 3, px: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'space-between', justifyContent: 'space-between', pt: 2 }}> <Box sx={{ display: 'flex', alignItems: 'space-between', justifyContent: 'space-between' }}>
<div style={{ display: "flex", flexDirection: "row", gap: 10, fontFamily: "Inter" }}> <div style={{ display: "flex", flexDirection: "row", gap: 10, fontFamily: "Inter" }}>
<img <img
@@ -340,12 +354,12 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.2)" boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.2)"
}} }}
/> />
<div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}> <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", paddingLeft: 8 }}>
<div style={{ <div style={{
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
}}> }}>
<Typography variant="h6" component="div" sx={{ fontWeight: 600 }}> <Typography variant="h5" component="div" sx={{ fontWeight: 600 }}>
{newAppname} {newAppname}
</Typography> </Typography>
{ {
@@ -380,13 +394,16 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
<Button <Button
variant="contained" variant="contained"
sx={{ sx={{
bgcolor: '#ff7043', bgcolor: '#494949',
'&:hover': { bgcolor: '#f4511e' }, '&:hover': { bgcolor: '#494949' },
textTransform: 'none', textTransform: 'none',
borderRadius: 1, borderRadius: 1,
py: 1, minWidth: '45px',
display: 'flex', width: '45px',
alignItems: 'center' height: '40px',
padding: 2,
color: "#fff",
fontFamily: "Inter"
}} }}
> >
<CloudDownloadOutlined /> <CloudDownloadOutlined />
@@ -394,17 +411,17 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
<Button <Button
variant="contained" variant="contained"
sx={{ sx={{
bgcolor: '#ff7043', bgcolor: "#494949",
'&:hover': { bgcolor: '#f4511e' }, '&:hover': { bgcolor: '#494949' },
textTransform: 'none', textTransform: 'none',
borderRadius: 1, borderRadius: 1,
py: 1, py: 1,
display: 'flex', px: 3,
alignItems: 'center' height: '40px',
color: "#fff",
fontFamily: "Inter"
}} }}
startIcon={ startIcon={canEditApp ? <EditIcon /> : <ForkRightIcon />}
canEditApp ? <EditIcon /> : <ForkRightIcon />
}
> >
{canEditApp ? "Edit" : "Fork"} {canEditApp ? "Edit" : "Fork"}
</Button> </Button>
@@ -421,14 +438,26 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
textAlign: "start", textAlign: "start",
flex: 1, flex: 1,
}}> }}>
<Typography variant="h4" sx={{ <Typography
fontWeight: 700, variant="h6"
mb: 0.3, sx={{
color: '#fff' fontFamily: 'Inter, sans-serif',
}}> fontSize: '24px',
fontWeight: 600,
mb: 0.3,
color: '#fff'
}}
>
20 20
</Typography> </Typography>
<Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.7)' }}> <Typography
variant="body2"
sx={{
color: 'rgba(255, 255, 255, 0.7)',
fontFamily: 'Inter, sans-serif',
fontSize: '14px'
}}
>
Public Workflow Public Workflow
</Typography> </Typography>
</div> </div>
@@ -439,8 +468,9 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
paddingLeft: "10px", paddingLeft: "10px",
height: "100%", height: "100%",
}}> }}>
<Typography variant="h4" sx={{ <Typography variant="h6"
fontWeight: 700, sx={{
fontWeight: 600,
mb: 0.3, mb: 0.3,
color: '#fff' color: '#fff'
}}> }}>
@@ -456,7 +486,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
paddingLeft: "10px", paddingLeft: "10px",
paddingTop: "5px" paddingTop: "5px"
}}> }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: "5px" }}> <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: "5px", fontFamily: "Inter", fontSize: "14px", fontWeight: 600 }}>
{ {
app?.collection ? ( app?.collection ? (
<> <>
@@ -474,7 +504,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
} }
</div> </div>
<Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.7)', marginLeft: "1px" }}> <Typography variant="body2" sx={{ color: 'rgba(158, 158, 158, 1)' }}>
Part of a collection Part of a collection
</Typography> </Typography>
</div> </div>
@@ -489,9 +519,9 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
<div style={{ <div style={{
fontFamily: "Inter", fontFamily: "Inter",
fontSize: "16px", fontSize: "16px",
fontWeight: 500,
color: "#fff", color: "#fff",
marginBottom: "5px" marginBottom: "16px",
fontWeight: 600
}}> }}>
{ {
(foundAppUsecase?.srcapp !== undefined && foundAppUsecase?.dstapp !== undefined) ? ( (foundAppUsecase?.srcapp !== undefined && foundAppUsecase?.dstapp !== undefined) ? (
@@ -503,9 +533,9 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
</div> </div>
<Box sx={{ <Box sx={{
bgcolor: 'action.hover', bgcolor: '#2F2F2F',
p: 2, p: 2,
borderRadius: 1, borderRadius: 2,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
mb: 3 mb: 3
@@ -550,7 +580,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
) )
} }
</Stack> </Stack>
<Typography sx={{ ml: 2, fontSize: "14px", letterSpacing: "0.5px" }}> <Typography sx={{ ml: 2, fontSize: "16px", letterSpacing: "0.5px" }}>
{foundAppUsecase?.name || "Search for a Usecase"} {foundAppUsecase?.name || "Search for a Usecase"}
</Typography> </Typography>
</Box> </Box>
@@ -560,24 +590,24 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
<Button <Button
variant="contained" variant="contained"
sx={{ sx={{
bgcolor: '#ff7043', bgcolor: '#FF8544',
'&:hover': { '&:hover': { bgcolor: '#FF8544' },
bgcolor: '#f4511e'
},
textTransform: 'none', textTransform: 'none',
borderRadius: 1, borderRadius: 1,
py: 1, py: 1,
px: 5, px: 7,
fontSize: "16px", fontSize: "14px",
tracking: "0.5px", letterSpacing: "0.5px",
color: "black" color: "black",
fontFamily: "Inter",
minWidth: '200px'
}} }}
> >
Create a Usecase Create a Usecase
</Button> </Button>
</div> </div>
</DialogContent> </DialogContent>
</Dialog > </Dialog>
); );
}; };
frontend/src/components/AppSelection.jsx
+50 -24
View File
@@ -428,30 +428,56 @@ const AppSelection = props => {
/> />
</div> </div>
) : null} ) : null}
<Typography {
variant="h4" !isAppPage && (
style={{ <>
marginLeft: 8, <Typography
marginTop: isMobile ? null : 40, variant="h4"
marginRight: 30, style={{
marginBottom: 0, marginLeft: 8,
}} marginTop: isMobile ? null : 40,
color="rgba(241, 241, 241, 1)" marginRight: 30,
> marginBottom: 0,
Find your apps }}
</Typography> color="rgba(241, 241, 241, 1)"
<Typography >
variant="body2" Find your apps
style={{ </Typography>
marginLeft: 8, <Typography
marginTop: 10, variant="body2"
marginRight: 30, style={{
marginBottom: 40, marginLeft: 8,
}} marginTop: 10,
color="rgba(158, 158, 158, 1)" marginRight: 30,
> marginBottom: 40,
Select the apps you work with and we will connect them for you. }}
</Typography> color="rgba(158, 158, 158, 1)"
>
Select the apps you work with and we will connect them for you.
</Typography>
</>
)
}
{
isAppPage && (
<div style={{marginBottom: 20}}>
<span
style={{
fontSize: 16,
color: "rgba(158, 158, 158, 1)",
fontFamily: "Inter",
}}
>
Your organization has no apps yet, select your starting apps here
or discover more apps using the <span
onClick={() => {
navigate("/apps2?tab=all_apps")
}}
style={{ color: "#FF8444", fontWeight: "medium", fontSize: 16, cursor:"pointer" }}>App Library</span>
</span>
</div>
)
}
<Grid rowSpacing={1} columnSpacing={2} container > <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 // This is here due to a memory issue with setting apps properly
frontend/src/views/Apps2.jsx
+1387 -586
View File
File diff suppressed because it is too large Load Diff
frontend/src/views/Workflows2.jsx
+105 -39
View File
@@ -724,7 +724,15 @@ const Workflows2 = (props) => {
}; };
const handleCreateWorkflow = () => { const handleCreateWorkflow = () => {
setDialogModalOpen(true) setModalOpen(true)
setIsEditing(false)
setNewWorkflowName("")
setNewWorkflowDescription("")
setDefaultReturnValue("")
setEditingWorkflow({})
setNewWorkflowTags([])
setSelectedUsecases([])
}; };
@@ -2086,9 +2094,9 @@ const Workflows2 = (props) => {
continue continue
} }
if (parsedAction.name === "Shuffle Tools" || parsedAction.id === "bc78f35c6c6351b07a09b7aed5d29652") { // if (parsedAction.name === "Shuffle Tools" || parsedAction.id === "bc78f35c6c6351b07a09b7aed5d29652") {
continue // continue
} // }
if (appsFound.findIndex(data => data.name === parsedAction.name) < 0) { if (appsFound.findIndex(data => data.name === parsedAction.name) < 0) {
appsFound.push(parsedAction) appsFound.push(parsedAction)
@@ -3232,7 +3240,7 @@ const Workflows2 = (props) => {
<IconButton <IconButton
style={{ position: "absolute", top: 10, right: 50, zIndex: 1000 }} style={{ position: "absolute", top: 10, right: 50, zIndex: 1000 }}
onClick={() => { onClick={() => {
setDialogModalOpen(true) setModalOpen(true)
setIsEditing(false) setIsEditing(false)
}} }}
> >
@@ -3287,11 +3295,11 @@ const Workflows2 = (props) => {
<Typography variant="h5"> <Typography variant="h5">
{editingWorkflow.id !== undefined ? "Edit Workflow" : "Create New Workflow"} {editingWorkflow.id !== undefined ? "Edit Workflow" : "Create New Workflow"}
</Typography> </Typography>
<div style={{ display: "flex", gap: 10 }}> <div style={{ display: "flex", gap: 15 }}>
<Tooltip title={"Import manually"} placement="top"> <Tooltip title={"Import manually"} placement="top">
<IconButton <IconButton
color="primary" color="primary"
size="small" size="medium"
onClick={() => upload.click()} onClick={() => upload.click()}
style={{ backgroundColor: "rgba(255,255,255,0.08)" }} style={{ backgroundColor: "rgba(255,255,255,0.08)" }}
> >
@@ -3299,7 +3307,7 @@ const Workflows2 = (props) => {
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<IconButton <IconButton
size="small" size="medium"
onClick={() => setDialogModalOpen(false)} onClick={() => setDialogModalOpen(false)}
style={{ backgroundColor: "rgba(255,255,255,0.08)" }} style={{ backgroundColor: "rgba(255,255,255,0.08)" }}
> >
@@ -3532,7 +3540,7 @@ const Workflows2 = (props) => {
setDefaultReturnValue(""); setDefaultReturnValue("");
setEditingWorkflow({}); setEditingWorkflow({});
setNewWorkflowTags([]); setNewWorkflowTags([]);
setModalOpen(false); setDialogModalOpen(false);
setSelectedUsecases([]) setSelectedUsecases([])
}} }}
> >
@@ -4035,6 +4043,7 @@ const Workflows2 = (props) => {
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20, gap: 10 }}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20, gap: 10 }}>
<MuiChipsInput <MuiChipsInput
placeholder="Filter Workflows" placeholder="Filter Workflows"
variant="outlined" variant="outlined"
@@ -4045,20 +4054,38 @@ const Workflows2 = (props) => {
setFilters(chips); setFilters(chips);
findWorkflow(chips); findWorkflow(chips);
}} }}
style={{ flex: 0.9, borderRadius: 8 }} style={{ flex: 0.9 }}
// style={searchStyle} InputProps={{
//onAdd={(chip) => { style: {
// console.log("ADd: ", chip); color: "white",
// addFilter(chip); borderRadius: 8,
//}} },
//onDelete={(_, index) => { }}
// console.log("Remove: ", index); sx={{
// removeFilter(index); '& .MuiOutlinedInput-root': {
//}} '& fieldset': {
borderColor: 'rgba(255, 255, 255, 0.2)',
},
'&:hover fieldset': {
borderColor: 'rgba(255, 255, 255, 0.3)',
},
'&.Mui-focused fieldset': {
borderColor: '#f85a3e',
},
},
'& .MuiChip-root': {
backgroundColor: 'rgba(255, 255, 255, 0.1)',
color: 'white',
'& .MuiChip-deleteIcon': {
color: 'rgba(255, 255, 255, 0.7)',
'&:hover': {
color: 'white',
},
},
},
}}
/> />
<Select <Select
fullWidth fullWidth
variant="outlined" variant="outlined"
@@ -4069,14 +4096,12 @@ const Workflows2 = (props) => {
style={{ flex: 0.9, maxWidth: 350, borderRadius: 8 }} style={{ flex: 0.9, maxWidth: 350, borderRadius: 8 }}
renderValue={(selected) => selected.length ? selected.join(', ') : 'All Categories'} renderValue={(selected) => selected.length ? selected.join(', ') : 'All Categories'}
> >
<MenuItem disabled value="">All Categories</MenuItem> <MenuItem disabled value="" style={{}}>All Categories</MenuItem>
{usecases.map((usecase) => { {usecases.map((usecase, index) => {
if (usecase?.name === "5. Verify") { if (usecase?.name === "5. Verify") {
return null; return null;
} }
const percentDone = usecase.matches.length > 0 ? parseInt(usecase.matches.length / usecase.list.length * 100) : 0 const percentDone = usecase.matches.length > 0 ? parseInt(usecase.matches.length / usecase.list.length * 100) : 0
if (percentDone === 0) { if (percentDone === 0) {
usecase = findMatches(usecase, workflows) usecase = findMatches(usecase, workflows)
@@ -4084,27 +4109,68 @@ const Workflows2 = (props) => {
const category = usecase?.name.split(" ")[1] const category = usecase?.name.split(" ")[1]
return ( return (
<MenuItem value={category} <MenuItem
value={category}
onClick={() => { onClick={() => {
console.log("Filters: ", filters, usecase?.name.toLowerCase())
if (!filters.includes(usecase?.name.toLowerCase())) { if (!filters.includes(usecase?.name.toLowerCase())) {
addFilter(usecase.name) addFilter(usecase.name)
} else { } else {
removeFilter(filters.indexOf(usecase?.name.toLowerCase())) removeFilter(filters.indexOf(usecase?.name.toLowerCase()))
} }
}} }}
style={{
padding: "12px 16px",
borderBottom: index === usecases.length - 2 ? "none" : "1px solid rgba(255,255,255,0.05)",
"&:hover": {
backgroundColor: "rgba(255,255,255,0.1)"
}
}}
> >
<Checkbox checked={selectedCategory.includes(category)} /> <div style={{
<span style={{ textDecoration: "none", width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", paddingRight: 2 }}> display: "flex",
<Typography variant="body1" color="textPrimary"> alignItems: "center",
{category} width: "100%",
</Typography> gap: "12px"
<Typography variant="body2" color="textSecondary"> }}>
{usecase?.matches.length}/{usecase?.list.length} <Checkbox
</Typography> checked={selectedCategory.includes(category)}
</span> style={{
</MenuItem>) padding: 0,
marginRight: 8,
color: "rgba(255,255,255,0.7)"
}}
/>
<div style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
width: "100%"
}}>
<Typography
variant="body1"
style={{
color: "rgba(255,255,255,0.9)",
fontWeight: selectedCategory.includes(category) ? 500 : 400
}}
>
{category}
</Typography>
<Typography
variant="body2"
style={{
color: "rgba(255,255,255,0.5)",
backgroundColor: "rgba(255,255,255,0.1)",
padding: "2px 8px",
borderRadius: "12px",
fontSize: "0.75rem"
}}
>
{usecase?.matches.length}/{usecase?.list.length}
</Typography>
</div>
</div>
</MenuItem>
)
})} })}
</Select> </Select>
@@ -4632,7 +4698,7 @@ const Workflows2 = (props) => {
</ShepherdTour> </ShepherdTour>
*/} */}
<DropzoneWrapper onDrop={uploadFile} WorkflowView={WorkflowView} /> <DropzoneWrapper onDrop={uploadFile} WorkflowView={WorkflowView} />
{modalView} {/* {modalView} */}
{deleteModal} {deleteModal}
{exportVerifyModal} {exportVerifyModal}
{publishModal} {publishModal}