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
PaperProps={{
sx: {
borderRadius: 3,
border: "1px solid var(--Container-Stroke, #494949)",
backgroundColor: "var(--Container, #212121)",
borderRadius: 2,
border: "1px solid #494949",
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',
justifyContent: 'space-between',
alignItems: 'center',
pb: 1,
pb: 2,
pt: 2,
px: 3
pl: 3,
pr: 2,
fontFamily: "Inter"
}}
>
<Typography variant="h5" component="div" sx={{ fontWeight: 500 }}>
About Gmail
<Typography component="div" sx={{ fontWeight: 500, color: "#F1F1F1", fontSize: "22px" }}>
About {app?.name.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase())}
</Typography>
<IconButton
onClick={onClose}
sx={{
color: 'text.secondary',
'&:hover': { bgcolor: 'action.hover' }
color: 'rgba(255, 255, 255, 0.7)',
'&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' }
}}
>
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent>
<Box sx={{ display: 'flex', alignItems: 'space-between', justifyContent: 'space-between', pt: 2 }}>
<DialogContent sx={{ py: 3, px: 3 }}>
<Box sx={{ display: 'flex', alignItems: 'space-between', justifyContent: 'space-between' }}>
<div style={{ display: "flex", flexDirection: "row", gap: 10, fontFamily: "Inter" }}>
<img
@@ -340,12 +354,12 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
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={{
display: "flex",
flexDirection: "row",
}}>
<Typography variant="h6" component="div" sx={{ fontWeight: 600 }}>
<Typography variant="h5" component="div" sx={{ fontWeight: 600 }}>
{newAppname}
</Typography>
{
@@ -380,13 +394,16 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
<Button
variant="contained"
sx={{
bgcolor: '#ff7043',
'&:hover': { bgcolor: '#f4511e' },
bgcolor: '#494949',
'&:hover': { bgcolor: '#494949' },
textTransform: 'none',
borderRadius: 1,
py: 1,
display: 'flex',
alignItems: 'center'
minWidth: '45px',
width: '45px',
height: '40px',
padding: 2,
color: "#fff",
fontFamily: "Inter"
}}
>
<CloudDownloadOutlined />
@@ -394,17 +411,17 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
<Button
variant="contained"
sx={{
bgcolor: '#ff7043',
'&:hover': { bgcolor: '#f4511e' },
bgcolor: "#494949",
'&:hover': { bgcolor: '#494949' },
textTransform: 'none',
borderRadius: 1,
py: 1,
display: 'flex',
alignItems: 'center'
px: 3,
height: '40px',
color: "#fff",
fontFamily: "Inter"
}}
startIcon={
canEditApp ? <EditIcon /> : <ForkRightIcon />
}
startIcon={canEditApp ? <EditIcon /> : <ForkRightIcon />}
>
{canEditApp ? "Edit" : "Fork"}
</Button>
@@ -421,14 +438,26 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
textAlign: "start",
flex: 1,
}}>
<Typography variant="h4" sx={{
fontWeight: 700,
mb: 0.3,
color: '#fff'
}}>
<Typography
variant="h6"
sx={{
fontFamily: 'Inter, sans-serif',
fontSize: '24px',
fontWeight: 600,
mb: 0.3,
color: '#fff'
}}
>
20
</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
</Typography>
</div>
@@ -439,8 +468,9 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
paddingLeft: "10px",
height: "100%",
}}>
<Typography variant="h4" sx={{
fontWeight: 700,
<Typography variant="h6"
sx={{
fontWeight: 600,
mb: 0.3,
color: '#fff'
}}>
@@ -456,7 +486,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
paddingLeft: "10px",
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 ? (
<>
@@ -474,7 +504,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
}
</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
</Typography>
</div>
@@ -489,9 +519,9 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
<div style={{
fontFamily: "Inter",
fontSize: "16px",
fontWeight: 500,
color: "#fff",
marginBottom: "5px"
marginBottom: "16px",
fontWeight: 600
}}>
{
(foundAppUsecase?.srcapp !== undefined && foundAppUsecase?.dstapp !== undefined) ? (
@@ -503,9 +533,9 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
</div>
<Box sx={{
bgcolor: 'action.hover',
bgcolor: '#2F2F2F',
p: 2,
borderRadius: 1,
borderRadius: 2,
display: 'flex',
alignItems: 'center',
mb: 3
@@ -550,7 +580,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
)
}
</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"}
</Typography>
</Box>
@@ -560,24 +590,24 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
<Button
variant="contained"
sx={{
bgcolor: '#ff7043',
'&:hover': {
bgcolor: '#f4511e'
},
bgcolor: '#FF8544',
'&:hover': { bgcolor: '#FF8544' },
textTransform: 'none',
borderRadius: 1,
py: 1,
px: 5,
fontSize: "16px",
tracking: "0.5px",
color: "black"
px: 7,
fontSize: "14px",
letterSpacing: "0.5px",
color: "black",
fontFamily: "Inter",
minWidth: '200px'
}}
>
Create a Usecase
</Button>
</div>
</DialogContent>
</Dialog >
</Dialog>
);
};
frontend/src/components/AppSelection.jsx
+50 -24
View File
@@ -428,30 +428,56 @@ const AppSelection = props => {
/>
</div>
) : null}
<Typography
variant="h4"
style={{
marginLeft: 8,
marginTop: isMobile ? null : 40,
marginRight: 30,
marginBottom: 0,
}}
color="rgba(241, 241, 241, 1)"
>
Find your apps
</Typography>
<Typography
variant="body2"
style={{
marginLeft: 8,
marginTop: 10,
marginRight: 30,
marginBottom: 40,
}}
color="rgba(158, 158, 158, 1)"
>
Select the apps you work with and we will connect them for you.
</Typography>
{
!isAppPage && (
<>
<Typography
variant="h4"
style={{
marginLeft: 8,
marginTop: isMobile ? null : 40,
marginRight: 30,
marginBottom: 0,
}}
color="rgba(241, 241, 241, 1)"
>
Find your apps
</Typography>
<Typography
variant="body2"
style={{
marginLeft: 8,
marginTop: 10,
marginRight: 30,
marginBottom: 40,
}}
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 >
{appButtons.map((appData, index) => {
// 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 = () => {
setDialogModalOpen(true)
setModalOpen(true)
setIsEditing(false)
setNewWorkflowName("")
setNewWorkflowDescription("")
setDefaultReturnValue("")
setEditingWorkflow({})
setNewWorkflowTags([])
setSelectedUsecases([])
};
@@ -2086,9 +2094,9 @@ const Workflows2 = (props) => {
continue
}
if (parsedAction.name === "Shuffle Tools" || parsedAction.id === "bc78f35c6c6351b07a09b7aed5d29652") {
continue
}
// if (parsedAction.name === "Shuffle Tools" || parsedAction.id === "bc78f35c6c6351b07a09b7aed5d29652") {
// continue
// }
if (appsFound.findIndex(data => data.name === parsedAction.name) < 0) {
appsFound.push(parsedAction)
@@ -3232,7 +3240,7 @@ const Workflows2 = (props) => {
<IconButton
style={{ position: "absolute", top: 10, right: 50, zIndex: 1000 }}
onClick={() => {
setDialogModalOpen(true)
setModalOpen(true)
setIsEditing(false)
}}
>
@@ -3287,11 +3295,11 @@ const Workflows2 = (props) => {
<Typography variant="h5">
{editingWorkflow.id !== undefined ? "Edit Workflow" : "Create New Workflow"}
</Typography>
<div style={{ display: "flex", gap: 10 }}>
<div style={{ display: "flex", gap: 15 }}>
<Tooltip title={"Import manually"} placement="top">
<IconButton
color="primary"
size="small"
size="medium"
onClick={() => upload.click()}
style={{ backgroundColor: "rgba(255,255,255,0.08)" }}
>
@@ -3299,7 +3307,7 @@ const Workflows2 = (props) => {
</IconButton>
</Tooltip>
<IconButton
size="small"
size="medium"
onClick={() => setDialogModalOpen(false)}
style={{ backgroundColor: "rgba(255,255,255,0.08)" }}
>
@@ -3532,7 +3540,7 @@ const Workflows2 = (props) => {
setDefaultReturnValue("");
setEditingWorkflow({});
setNewWorkflowTags([]);
setModalOpen(false);
setDialogModalOpen(false);
setSelectedUsecases([])
}}
>
@@ -4035,6 +4043,7 @@ const Workflows2 = (props) => {
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20, gap: 10 }}>
<MuiChipsInput
placeholder="Filter Workflows"
variant="outlined"
@@ -4045,20 +4054,38 @@ const Workflows2 = (props) => {
setFilters(chips);
findWorkflow(chips);
}}
style={{ flex: 0.9, borderRadius: 8 }}
// style={searchStyle}
//onAdd={(chip) => {
// console.log("ADd: ", chip);
// addFilter(chip);
//}}
//onDelete={(_, index) => {
// console.log("Remove: ", index);
// removeFilter(index);
//}}
style={{ flex: 0.9 }}
InputProps={{
style: {
color: "white",
borderRadius: 8,
},
}}
sx={{
'& .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
fullWidth
variant="outlined"
@@ -4069,14 +4096,12 @@ const Workflows2 = (props) => {
style={{ flex: 0.9, maxWidth: 350, borderRadius: 8 }}
renderValue={(selected) => selected.length ? selected.join(', ') : 'All Categories'}
>
<MenuItem disabled value="">All Categories</MenuItem>
{usecases.map((usecase) => {
<MenuItem disabled value="" style={{}}>All Categories</MenuItem>
{usecases.map((usecase, index) => {
if (usecase?.name === "5. Verify") {
return null;
}
const percentDone = usecase.matches.length > 0 ? parseInt(usecase.matches.length / usecase.list.length * 100) : 0
if (percentDone === 0) {
usecase = findMatches(usecase, workflows)
@@ -4084,27 +4109,68 @@ const Workflows2 = (props) => {
const category = usecase?.name.split(" ")[1]
return (
<MenuItem value={category}
<MenuItem
value={category}
onClick={() => {
console.log("Filters: ", filters, usecase?.name.toLowerCase())
if (!filters.includes(usecase?.name.toLowerCase())) {
addFilter(usecase.name)
} else {
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)} />
<span style={{ textDecoration: "none", width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", paddingRight: 2 }}>
<Typography variant="body1" color="textPrimary">
{category}
</Typography>
<Typography variant="body2" color="textSecondary">
{usecase?.matches.length}/{usecase?.list.length}
</Typography>
</span>
</MenuItem>)
<div style={{
display: "flex",
alignItems: "center",
width: "100%",
gap: "12px"
}}>
<Checkbox
checked={selectedCategory.includes(category)}
style={{
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>
@@ -4632,7 +4698,7 @@ const Workflows2 = (props) => {
</ShepherdTour>
*/}
<DropzoneWrapper onDrop={uploadFile} WorkflowView={WorkflowView} />
{modalView}
{/* {modalView} */}
{deleteModal}
{exportVerifyModal}
{publishModal}