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

UI fixes across the board :)

Browse Source
This commit is contained in:
Frikky
2024-05-11 00:36:14 +02:00
parent 51e07f7271
commit 7a1529463d
13 changed files with 404 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AppGrid.jsx
+2 -2
View File
@@ -225,7 +225,7 @@ const AppGrid = (props) => {
}}
autoComplete="off"
color="primary"
placeholder="Find Apps"
placeholder="Search more than 2500 Apps"
id="shuffle_search_field"
onChange={(event) => {
setSearchQuery(event.currentTarget.value);
@@ -989,7 +989,7 @@ const AppGrid = (props) => {
}}
autoComplete="off"
color="primary"
placeholder="Find Apps"
placeholder="Search more than 2500 Apps"
id="shuffle_search_field"
onChange={(event) => {
setSearchQuery(event.currentTarget.value);
frontend/src/components/EditWorkflow.jsx
+105 -3
View File
@@ -11,9 +11,9 @@ import {
Badge,
Avatar,
Grid,
InputLabel,
Select,
ListSubheader,
InputLabel,
Select,
ListSubheader,
Paper,
Tooltip,
Divider,
@@ -22,6 +22,7 @@ import {
IconButton,
Menu,
MenuItem,
Link,
FormControlLabel,
Chip,
Switch,
@@ -543,6 +544,7 @@ const EditWorkflow = (props) => {
margin="dense"
fullWidth
/>
<TextField
onBlur={(event) => {
innerWorkflow.default_return_value = event.target.value
@@ -563,6 +565,106 @@ const EditWorkflow = (props) => {
fullWidth
/>
<Typography variant="body2" style={{marginTop: 50, }}>
MSSP Suborg Distribution (beta - contact support@shuffler.io)
</Typography>
{userdata !== undefined && userdata !== null && userdata.orgs !== undefined && userdata.orgs !== null && userdata.orgs.length > 0 ?
userdata.orgs.filter(org => org.creator_org === userdata.active_org.id).length === 0 ?
<Typography variant="body2" style={{marginTop: 10, color: "rgba(255,255,255,0.7)"}}>
You can only distribute to suborgs from a parent org.
</Typography>
:
<Select
multiple
style={{marginTop: 10, }}
value={innerWorkflow.suborg_distribution === undefined || innerWorkflow.suborg_distribution === null ? ["none"] : innerWorkflow.suborg_distribution}
onChange={(e) => {
var newvalue = e.target.value
if (newvalue.length > 1 && newvalue[0] === "none") {
newvalue = newvalue.filter(value => value !== "none")
}
console.log("NEWVALUE: ", newvalue)
if (newvalue.includes("none")) {
newvalue = ["none"]
} else if (newvalue.includes("all")) {
newvalue = userdata.orgs.filter(org => org.creator_org === userdata.active_org.id).map(org => org.id)
}
innerWorkflow.suborg_distribution = newvalue
setInnerWorkflow(innerWorkflow)
setUpdate(Math.random())
}}
label="Suborg Distribution"
fullWidth
>
<MenuItem value="none">
None
</MenuItem>
<MenuItem value="all">
All
</MenuItem>
{userdata.orgs.map((data, index) => {
var skipOrg = false;
if (data.creator_org !== undefined && data.creator_org !== null && data.creator_org === userdata.active_org.id) {
// Finds the parent org
} else {
return null
}
const imagesize = 22
const imageStyle = {
width: imagesize,
height: imagesize,
pointerEvents: "none",
marginRight: 10,
marginLeft:
data.creator_org !== undefined &&
data.creator_org !== null &&
data.creator_org.length > 0
? data.id === userdata.active_org.id
? 0
: 20
: 0,
}
const image =
data.image === "" ? (
<img
alt={data.name}
src={theme.palette.defaultImage}
style={imageStyle}
/>
) : (
<img
alt={data.name}
src={data.image}
style={imageStyle}
/>
)
return (
<MenuItem key={index} value={data.id}>
<Checkbox checked={innerWorkflow.suborg_distribution !== undefined && innerWorkflow.suborg_distribution !== null && innerWorkflow.suborg_distribution.includes(data.id)} />
{image}{" "}
<span style={{ marginLeft: 8 }}>
{data.name}
</span>
</MenuItem>
)
})}
</Select>
:
<Link to={"/admin?tab=suborgs"} style={{textDecoration: "none", color: "#f86a3e"}} target="_blank">
<Typography variant="body2" style={{marginTop: 10, }}>
Create a sub-org to distribute workflows to suborgs.
</Typography>
</Link>
}
<Typography variant="h6" style={{marginTop: 50, }}>
Input fields
</Typography>
frontend/src/components/NewHeader.jsx
+128 -35
View File
@@ -27,6 +27,7 @@ import {
} from "@mui/material";
import {
Close as CloseIcon,
MeetingRoom as MeetingRoomIcon,
HelpOutline as HelpOutlineIcon,
Settings as SettingsIcon,
@@ -40,6 +41,7 @@ import {
Add as AddIcon,
Analytics as AnalyticsIcon,
Lightbulb as LightbulbIcon,
ExpandMore as ExpandMoreIcon,
} from "@mui/icons-material";
const hoverColor = "#f85a3e";
@@ -58,8 +60,11 @@ const Header = (props) => {
isMobile,
serverside,
setModalOpen,
curpath,
} = props;
const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor);
const [SoarHoverColor, setSoarHoverColor] = useState(hoverOutColor);
const [LoginHoverColor, setLoginHoverColor] = useState(hoverOutColor);
@@ -70,6 +75,7 @@ const Header = (props) => {
const [anchorElAvatar, setAnchorElAvatar] = React.useState(null);
const [subAnchorEl, setSubAnchorEl] = React.useState(null);
const [upgradeHovered, setUpgradeHovered] = React.useState(false);
const [showTopbar, setShowTopbar] = useState(false)
let navigate = useNavigate();
const handleClick = (event) => {
@@ -188,7 +194,15 @@ const Header = (props) => {
removeCookie("session_token", { path: "/" });
removeCookie("session_token", { path: "/" });
removeCookie("session_token", { path: "/" });
removeCookie("__session", { path: "/" });
removeCookie("__session", { path: "/" });
removeCookie("__session", { path: "/" });
removeCookie("__session", { path: "/" });
window.location.pathname = "/";
localStorage.setItem("globalUrl", "")
})
.catch((error) => {
console.log(error);
@@ -266,7 +280,7 @@ const Header = (props) => {
: null,
cursor: "pointer",
marginRight: 10,
};
}
image =
foundOrg.image === "" ? (
@@ -355,14 +369,13 @@ const Header = (props) => {
setAnchorEl(event.currentTarget);
}}
>
<Badge badgeContent={notifications.filter((n) => n.read === false).length} color="primary">
{/*<Badge badgeContent={notifications.filter((n) => n.read === false).length} color="primary">*/}
<NotificationsIcon
color="secondary"
style={{ height: 30, width: 30 }}
alt="Your username here"
src=""
/>
</Badge>
</IconButton>
<Menu
id="simple-menu"
@@ -393,10 +406,10 @@ const Header = (props) => {
}}
>
<div style={{ display: "flex", marginBottom: 5 }}>
<Typography variant="body1">
<Typography variant="body1" style={{flex: 1, }}>
Notifications ({notifications.filter((data) => !data.read).length})
</Typography>
<ButtonGroup style={{height: 40, marginLeft: 50, }}>
<ButtonGroup style={{height: 40, flex: 1, }}>
{notifications.length > 1 ? (
<Button
color="primary"
@@ -420,7 +433,7 @@ const Header = (props) => {
</Button>
</ButtonGroup>
</div>
<Typography variant="body2">
<Typography variant="body2" color="textSecondary" style={{ marginTop: 5, }}>
Notifications generated made by Shuffle to help you discover issues or
improvements. <a href="/docs/organizations#notifications" target="_blank" rel="noopener noreferrer" style={{ color: "#f86a3e", textDecoration: "none", }}>
Learn more</a>
@@ -462,7 +475,9 @@ const Header = (props) => {
.then(function (response) {
if (response.status !== 200) {
console.log("Error in response");
}
} else {
localStorage.setItem("apps", [])
}
return response.json();
})
@@ -502,7 +517,7 @@ const Header = (props) => {
rel="noopener noreferrer"
target="_blank"
>
<Tooltip color="primary" title={"Join the community"} placement="left">
<Tooltip color="primary" title={"Join the Shuffle Automation Community"} placement="left">
<IconButton
color="primary"
style={{}}
@@ -527,7 +542,7 @@ const Header = (props) => {
userdata.avatar !== null &&
userdata.avatar.length > 0
? userdata.avatar
: "";
: ""
const avatarMenu = (
<span>
@@ -545,6 +560,7 @@ const Header = (props) => {
alt="Your username here"
src={parsedAvatar}
/>
<ExpandMoreIcon style={{color: "rgba(255,255,255,0.4)", }}/>
</IconButton>
<Menu
id="simple-menu"
@@ -562,7 +578,7 @@ const Header = (props) => {
handleClose();
}}
>
<BusinessIcon style={{ marginRight: 5 }} /> Organisation
<BusinessIcon style={{ marginRight: 5 }} /> Organization
</MenuItem>
</Link>
<Link to="/settings" style={hrefStyle}>
@@ -574,6 +590,18 @@ const Header = (props) => {
<SettingsIcon style={{ marginRight: 5 }} /> Account
</MenuItem>
</Link>
<Link to="/admin?admin_tab=priorities" style={hrefStyle}>
<MenuItem
onClick={(event) => {
handleClose();
}}
>
<NotificationsIcon style={{ marginRight: 5 }} /> Notifications
</MenuItem>
</Link>
{/*notificationMenu*/}
<Divider style={{ marginTop: 10, marginBottom: 10, }} />
<Link to="/docs" style={hrefStyle}>
<MenuItem
@@ -944,8 +972,8 @@ const Header = (props) => {
}}
>
{avatarMenu}
{notificationMenu}
{/*supportMenu*/}
{/*notificationMenu*/}
{supportMenu}
{logoCheck}
</span>
@@ -1050,7 +1078,7 @@ const Header = (props) => {
src={data.image}
style={imageStyle}
/>
);
)
var regiontag = "eu";
if (
@@ -1164,32 +1192,20 @@ const Header = (props) => {
onMouseOver={() => { setUpgradeHovered(true) }}
onMouseOut={() => { setUpgradeHovered(false) }}
onClick={() => {
// if (isCloud) {
// ReactGA.event({
// category: "header",
// action: "pricing_upgrade_click",
// label: "",
// });
// }
setModalOpen(true);
if (isCloud) {
ReactGA.event({
category: "header",
action: "upgrade_popup_click",
})
}
// if (window.drift !== undefined) {
// if (isCloud) {
// window.drift.api.startInteraction({
// interactionId: 386404,
// })
// } else {
// window.drift.api.startInteraction({
// interactionId: 386403,
// })
// }
// }
setModalOpen(true)
}}
>
{upgradeHovered ?
isCloud ? "Upgrade License" : "Upgrade License"
"Upgrade License"
:
isCloud ? "Upgrade" : "Upgrade"
"Upgrade"
}
</Button>
@@ -1420,8 +1436,82 @@ const Header = (props) => {
</div>
:
*/
const topbarHeight = showTopbar ? 40 : 0
const topbar = !showTopbar ? null :
curpath === "/" || curpath.includes("/docs/") || curpath === "/pricing" || curpath === "/contact" || curpath === "/search" ?
<span style={{ zIndex: 50001, }}>
<div style={{ position: "relative", height: topbarHeight, backgroundImage: "linear-gradient(to right, #f86a3e, #f34079)", overflow: "hidden", }}>
<Typography variant="body1" style={{ paddingTop: 7, margin: "auto", textAlign: "center", color: "white", }}>
Shuffle 1.4 is out! Read more about&nbsp;
<u>
<a href="https://github.com/Shuffle/Shuffle" style={{ color: "inherit", }} onClick={() => {
ReactGA.event({
category: "landingpage",
action: "click_header_features",
label: "",
})
//if (window.drift !== undefined) {
// window.drift.api.startInteraction({ interactionId: 341911 })
//} else {
// console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
//}
}} style={{ cursor: "pointer", textDecoration: "none", color: "rgba(255,255,255,0.8)" }}>
Features
</a>
</u>
,&nbsp;
<u>
<span onClick={() => {
ReactGA.event({
category: "landingpage",
action: "click_header_pricing",
label: "",
})
navigate("/pricing")
//if (window.drift !== undefined) {
// window.drift.api.startInteraction({ interactionId: 341911 })
//} else {
// console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
//}
}} style={{ cursor: "pointer", textDecoration: "none", color: "rgba(255,255,255,0.8)" }}>
Pricing
</span>
</u>
&nbsp;and&nbsp;
<u>
<span onClick={() => {
ReactGA.event({
category: "landingpage",
action: "click_header_creators",
label: "",
})
navigate("/creators")
//if (window.drift !== undefined) {
// window.drift.api.startInteraction({ interactionId: 341911 })
//} else {
// console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
//}
}} style={{ cursor: "pointer", textDecoration: "none", color: "rgba(255,255,255,0.8)" }}>
Earning as a Creator
</span>
</u>
</Typography>
<IconButton color="secondary" style={{ position: "absolute", top: -3, right: 20, }} onClick={(event) => { setShowTopbar(false) }}>
<CloseIcon />
</IconButton>
</div>
</span>
:
null
return !isMobile ?
<div style={{}}>
<div style={{marginTop: 0, }}>
<AppBar
color="transparent"
elevation={0}
@@ -1433,6 +1523,9 @@ const Header = (props) => {
backgroundColor: theme.palette.backgroundColor,
}}
>
{topbar}
<div style={{position: "sticky", top: 0, }}>
{loginTextBrowser}
</div>
frontend/src/components/Oauth2Auth.jsx
+1 -1
View File
@@ -407,7 +407,7 @@ const AuthenticationOauth2 = (props) => {
if (offlineAccess === true && !scopes.includes("offline_access")) {
console.log("IN scope 2")
if (!authenticationType.redirect_uri.includes("google")) {
if (!authenticationType.redirect_uri.includes("google") && !authenticationType.redirect_uri.includes("slack")) {
console.log("Appending offline access")
scopes.push("offline_access")
}
frontend/src/components/ParsedAction.jsx
+12 -5
View File
@@ -3237,16 +3237,23 @@ const ParsedAction = (props) => {
}}
defaultValue={selectedAction.app_version}
onChange={(event) => {
console.log("VAL: ", event.target.value)
console.log("App: ", selectedApp)
const newversion = selectedApp.versions.find(
(tmpApp) => tmpApp.version == event.target.value
);
)
console.log("NEWVERSION: ", newversion);
if (newversion !== undefined && newversion !== null) {
getApp(newversion.id, true);
getApp(newversion.id, true)
}
// Change in all actions in the workflow at the same time and add a toast.success() about it
for (var actionkey in workflow.actions) {
const action = workflow.actions[actionkey]
if (action.app_name === selectedAction.app_name) {
workflow.actions[actionkey].app_version = event.target.value
}
}
toast.success("Changed version of all nodes to "+event.target.value)
}}
style={{
marginTop: 10,
frontend/src/components/SearchData.jsx
+16 -1
View File
@@ -24,6 +24,11 @@ import {
import ArticleIcon from '@mui/icons-material/Article';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import ManageSearchIcon from '@mui/icons-material/ManageSearch';
import {
VerifiedUser as VerifiedUserIcon,
} from '@mui/icons-material'
import {
AvatarGroup,
} from "@mui/material"
@@ -233,9 +238,11 @@ const SearchData = props => {
const appGroup = hit.action_references === undefined || hit.action_references === null ? [] : hit.action_references
const avatar = baseImage
var parsedUrl = isCloud ? `/workflows/${hit.objectID}` : `https://shuffler.io/workflows/${hit.objectID}`
parsedUrl += `?queryID=${hit.__queryID}`
const validated = hit.validated !== undefined && hit.validate !== null ? hit.validated : false
// <a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}>
return (
@@ -271,7 +278,15 @@ const SearchData = props => {
setMouseHoverIndex(index)
}}>
<ListItemAvatar>
{avatar}
{validated === true ?
<Tooltip title="The functionality of this workflow manually verified by the Shuffle automation team" placement="top">
<VerifiedUserIcon style={{marginLeft: 0, marginRight: 20, }} />
</Tooltip>
:
<Tooltip title="Community-built workflow" placement="top">
{avatar}
</Tooltip>
}
</ListItemAvatar>
<div style={{}}>
<ListItemText
frontend/src/components/Searchfield.jsx
+1 -1
View File
@@ -92,7 +92,7 @@ const SearchField = props => {
>
{isHeader ? <div style={{ display: "flex"}}>
<DialogTitle style={{ marginTop: 15, marginLeft: 5, color: "var(--Paragraph-text, #C8C8C8)" }} >Search for Docs, Apps, Workflows and more</DialogTitle>
<Button fullWidth style={{ marginLeft:180, }} onClick={() => {
<Button color="secondary" fullWidth style={{ marginLeft:180, }} onClick={() => {
setModalOpen(false);
}}><CloseIcon /></Button>
</div>
frontend/src/components/ShuffleCodeEditor1.jsx
+1 -1
View File
@@ -1698,7 +1698,7 @@ const CodeEditor = (props) => {
<Typography variant="body2">
<b>Test output</b>
</Typography>
<Typography variant="body2">
<Typography variant="body2" style={{whiteSpace: 'pre-line', }}>
{executionResult.result}
</Typography>
</span>
frontend/src/defaultCytoscapeStyle.jsx
+1 -1
View File
@@ -8,7 +8,7 @@ const data = [
return ""
}
elementname = elementname.replace("_", " ", -1)
elementname = elementname.replaceAll("_", " ", -1)
elementname = elementname.charAt(0).toUpperCase() + elementname.slice(1)
return elementname
},
frontend/src/views/Admin.jsx
+3 -1
View File
@@ -1608,7 +1608,9 @@ If you're interested, please let me know a time that works for you, or set up a
.then(function (response) {
if (response.status !== 200) {
console.log("Error in response");
}
} else {
localStorage.setItem("apps", [])
}
return response.json();
})
frontend/src/views/AngularWorkflow.jsx
+117 -79
View File
File diff suppressed because one or more lines are too long
frontend/src/views/Apps.jsx
+8 -3
View File
@@ -675,12 +675,17 @@ const Apps = (props) => {
valid = "false";
}
if (data.actions === undefined || data.actions === null) {
data.actions = []
if (data.actions === undefined || data.actions === null) {
// Check if data type undefined/bool
if (typeof data === "boolean") {
data = {}
}
data.actions = []
}
if (data === undefined || data.actions === undefined || data.actions === null || data.actions.length === 0) {
valid = "false";
valid = "false"
}
var description = data.description;
frontend/src/views/Workflows.jsx
+9 -9
View File
@@ -646,7 +646,7 @@ const Workflows = (props) => {
if (sidebar === null || sidebar === undefined) {
console.log("No sidebar defined")
localStorage.setItem(sidebarKey, "open");
localStorage.setItem(sidebarKey, "open");
setDrawerOpen(true)
} else {
if (sidebar === "open") {
@@ -2009,11 +2009,11 @@ const Workflows = (props) => {
style={{ display: "flex", flexDirection: "column", width: "100%" }}
>
<Grid item style={{ display: "flex", maxHeight: 34 }}>
<Tooltip title={`Org "${orgName}"`} placement="bottom">
<Tooltip title={`Org "${orgName}". Click to edit image.`} placement="bottom">
<div
styl={{ cursor: "pointer" }}
onClick={() => {
addFilter(orgId);
navigate("/admin")
}}
>
{image}
@@ -2022,13 +2022,13 @@ const Workflows = (props) => {
<Tooltip arrow title={
<div style={{width: "100%", minWidth: 250, maxWidth: 310, }}>
{data.image !== undefined && data.image !== null && data.image.length > 0 ?
<img src={data.image} alt={data.name} style={{backgroundColor: theme.palette.surfaceColor, maxWidth: 300, minWidth: 250, borderRadius: theme.palette.borderRadius, }} />
: null}
<Typography>
Edit {data.name}
</Typography>
<img src={data.image} alt={data.name} style={{backgroundColor: theme.palette.surfaceColor, maxWidth: 300, minWidth: 250, borderRadius: theme.palette.borderRadius, }} />
: null}
<Typography>
Edit '{data.name}'
</Typography>
</div>
} placement="left">
} placement="right">
<Typography
variant="body1"
style={{