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

Loads of frontend fixes related to React & MUI

Browse Source
This commit is contained in:
Frikky
2023-09-19 14:37:41 +02:00
parent 45a0583728
commit c1c34ff72a
17 changed files with 1961 additions and 971 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AppGrid.jsx
+17 -13
View File
@@ -3,6 +3,7 @@ import React, {useEffect, useState} from 'react';
import theme from '../theme.jsx';
import ReactGA from 'react-ga4';
import {Link} from 'react-router-dom';
import { removeQuery } from '../components/ScrollToTop.jsx';
import {
Search as SearchIcon,
@@ -89,21 +90,24 @@ const AppGrid = props => {
}
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
useEffect(() => {
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search)
const params = Object.fromEntries(urlSearchParams.entries())
const foundQuery = params["q"]
if (foundQuery !== null && foundQuery !== undefined) {
console.log("Got query: ", foundQuery)
refine(foundQuery)
}
var defaultSearch = ""
//useEffect(() => {
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search)
const params = Object.fromEntries(urlSearchParams.entries())
const foundQuery = params["q"]
if (foundQuery !== null && foundQuery !== undefined) {
console.log("Got query: ", foundQuery)
refine(foundQuery)
defaultSearch = foundQuery
}
}, [])
}
//}, [])
return (
<form noValidate action="" role="search">
<TextField
defaultValue={defaultSearch}
fullWidth
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
InputProps={{
@@ -121,10 +125,12 @@ const AppGrid = props => {
autoComplete='off'
type="search"
color="primary"
defaultValue={currentRefinement}
placeholder="Find Apps..."
id="shuffle_search_field"
onChange={(event) => {
// Remove "q" from URL
removeQuery("q")
refine(event.currentTarget.value)
}}
limit={5}
@@ -151,8 +157,6 @@ const AppGrid = props => {
// setInnerHits(hits)
//}
console.log("In appgrid")
return (
<Grid container spacing={2}>
{hits.map((data, index) => {
frontend/src/components/CreatorGrid.jsx
+12 -10
View File
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
import ReactGA from 'react-ga4';
import {Link} from 'react-router-dom';
import theme from '../theme.jsx';
import { removeQuery } from '../components/ScrollToTop.jsx';
import {
SkipNext as SkipNextIcon,
@@ -97,20 +98,21 @@ const CreatorGrid = props => {
// value={currentRefinement}
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
useEffect(() => {
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search)
const params = Object.fromEntries(urlSearchParams.entries())
const foundQuery = params["q"]
if (foundQuery !== null && foundQuery !== undefined) {
refine(foundQuery)
}
var defaultSearch = ""
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search)
const params = Object.fromEntries(urlSearchParams.entries())
const foundQuery = params["q"]
if (foundQuery !== null && foundQuery !== undefined) {
refine(foundQuery)
defaultSearch = foundQuery
}
}, [])
}
return (
<form noValidate action="" role="search">
<TextField
defaultValue={defaultSearch}
fullWidth
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
InputProps={{
@@ -128,10 +130,10 @@ const CreatorGrid = props => {
autoComplete='off'
type="search"
color="primary"
value={currentRefinement}
placeholder="Find Creators..."
id="shuffle_search_field"
onChange={(event) => {
removeQuery("q")
refine(event.currentTarget.value)
}}
/>
frontend/src/components/DocsGrid.jsx
+13 -11
View File
@@ -3,6 +3,7 @@ import React, {useEffect, useState} from 'react';
import theme from '../theme.jsx';
import ReactGA from 'react-ga4';
import {Link} from 'react-router-dom';
import { removeQuery } from '../components/ScrollToTop.jsx';
import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon, Close as CloseIcon, Folder as FolderIcon, LibraryBooks as LibraryBooksIcon } from '@mui/icons-material';
import aa from 'search-insights'
@@ -84,21 +85,22 @@ const DocsGrid = props => {
}
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
useEffect(() => {
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search)
const params = Object.fromEntries(urlSearchParams.entries())
const foundQuery = params["q"]
if (foundQuery !== null && foundQuery !== undefined) {
console.log("Got query: ", foundQuery)
refine(foundQuery)
}
var defaultSearch = ""
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search)
const params = Object.fromEntries(urlSearchParams.entries())
const foundQuery = params["q"]
if (foundQuery !== null && foundQuery !== undefined) {
console.log("Got query: ", foundQuery)
refine(foundQuery)
defaultSearch = foundQuery
}
}, [])
}
return (
<form noValidate action="" role="search">
<TextField
defaultValue={defaultSearch}
fullWidth
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
InputProps={{
@@ -116,10 +118,10 @@ const DocsGrid = props => {
autoComplete='off'
type="search"
color="primary"
defaultValue={currentRefinement}
placeholder="Search our Documentation..."
id="shuffle_search_field"
onChange={(event) => {
removeQuery("q")
refine(event.currentTarget.value)
}}
limit={5}
frontend/src/components/Header.jsx
+1 -1
View File
@@ -521,7 +521,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
}
// Handle top bar or something
const defaultTop = 7
const defaultTop = 0
const loginTextBrowser = !isLoggedIn ?
<div style={{display: "flex", minWidth: 1250, maxWidth: 1250, margin: "auto", textAlign: "center",}}>
<div style={{display: "flex", flex: 1, }}>
frontend/src/components/Oauth2Auth.jsx
+3 -22
View File
@@ -218,7 +218,7 @@ const AuthenticationOauth2 = (props) => {
"31cb4c84-658e-43d5-ae84-22c9142e967a",
"",
"https://graph.microsoft.com",
["ChannelMessage.Edit", "ChannelMessage.Read.All", "ChannelMessage.Send", "Chat.Create", "Chat.ReadWrite", "Chat.Read", "offline_access"],
["ChannelMessage.Edit", "ChannelMessage.Read.All", "ChannelMessage.Send", "Chat.Create", "Chat.ReadWrite", "Chat.Read", "offline_access", "Team.ReadBasic.All"],
admin_consent,
)
} else if (selectedApp.name.toLowerCase().includes("todoist")) {
@@ -607,7 +607,7 @@ const AuthenticationOauth2 = (props) => {
<div>
<DialogTitle>
<div style={{ color: "white" }}>
Authentication for {selectedApp.name}
Authenticate {selectedApp.name.replaceAll("_", " ")}
</div>
</DialogTitle>
<DialogContent>
@@ -674,11 +674,6 @@ const AuthenticationOauth2 = (props) => {
style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}}
InputProps={{
style:{
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
},
}}
fullWidth
@@ -763,11 +758,6 @@ const AuthenticationOauth2 = (props) => {
}}
InputProps={{
style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
},
}}
fullWidth
@@ -804,11 +794,6 @@ const AuthenticationOauth2 = (props) => {
}}
InputProps={{
style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
height: "50px",
},
}}
fullWidth
@@ -827,11 +812,6 @@ const AuthenticationOauth2 = (props) => {
}}
InputProps={{
style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
height: "50px",
},
}}
fullWidth
@@ -848,6 +828,7 @@ const AuthenticationOauth2 = (props) => {
Scopes
<Select
multiple
underline={false}
value={selectedScopes}
style={{
backgroundColor: theme.palette.inputColor,
frontend/src/components/ParsedAction.jsx
+124 -93
View File
@@ -11,7 +11,7 @@ import { NestedMenuItem } from "mui-nested-menu";
//import { useAlert
import {
ButtonGroup,
ButtonGroup,
Popper,
TextField,
TextareaAutosize,
@@ -376,66 +376,57 @@ const ParsedAction = (props) => {
const [menuPosition, setMenuPosition] = useState(null);
useEffect(() => {
if (
selectedActionParameters !== null &&
selectedActionParameters.length === 0
if (selectedActionParameters !== undefined && selectedActionParameters !== null && selectedActionParameters.length === 0
) {
if (
selectedAction.parameters !== null &&
selectedAction.parameters.length > 0
) {
if (selectedAction.parameters !== undefined && selectedAction.parameters !== null && selectedAction.parameters.length > 0) {
setSelectedActionParameters(selectedAction.parameters);
}
}
if (
(selectedVariableParameter === null ||
selectedVariableParameter === undefined) &&
workflow.workflow_variables !== null &&
workflow.workflow_variables.length > 0
) {
if ((selectedVariableParameter === null || selectedVariableParameter === undefined) && workflow.workflow_variables !== null && workflow.workflow_variables.length > 0) {
// FIXME - this is the bad thing
setSelectedVariableParameter(workflow.workflow_variables[0].name);
}
if (actionlist.length === 0) {
// FIXME: Have previous execution values in here
if (workflowExecutions.length > 0) {
for (let [key,keyval] in Object.entries(workflowExecutions)) {
if (
workflowExecutions[key].execution_argument === undefined ||
workflowExecutions[key].execution_argument === null ||
workflowExecutions[key].execution_argument.length === 0
) {
continue;
}
const valid = validateJson(workflowExecutions[key].execution_argument)
if (valid.valid) {
actionlist.push({
type: "Execution Argument",
name: "Execution Argument",
value: "$exec",
highlight: "exec",
autocomplete: "exec",
example: valid.result,
})
break
}
if (workflowExecutions.length > 0) {
for (let [key,keyval] in Object.entries(workflowExecutions)) {
if (
workflowExecutions[key].execution_argument === undefined ||
workflowExecutions[key].execution_argument === null ||
workflowExecutions[key].execution_argument.length === 0
) {
continue;
}
const valid = validateJson(workflowExecutions[key].execution_argument)
if (valid.valid) {
actionlist.push({
type: "Execution Argument",
name: "Execution Argument",
value: "$exec",
highlight: "exec",
autocomplete: "exec",
example: valid.result,
})
break
}
}
if (actionlist.length === 0) {
actionlist.push({
type: "Execution Argument",
name: "Execution Argument",
value: "$exec",
highlight: "exec",
autocomplete: "exec",
example: "",
})
}
}
if (actionlist.length === 0) {
actionlist.push({
type: "Execution Argument",
name: "Execution Argument",
value: "$exec",
highlight: "exec",
autocomplete: "exec",
example: "",
})
}
actionlist.push({
type: "Shuffle DB",
@@ -1313,26 +1304,26 @@ const ParsedAction = (props) => {
data.value = data.example;
}
// In case of data.example
if (data.value === undefined || data.value === null) {
// In case of data.example
if (data.value === undefined || data.value === null) {
data.value = ""
}
if (data.value.length === 0) {
if (data.name.toLowerCase() === "headers") {
console.log("Should show headers field instead with + and -!")
// Check if file ID exists
//
const fileFound = selectedActionParameters.find(param => param.name === "file_id")
if (fileFound === undefined || fileFound === null) {
data.value = data.example
} else {
// Purposely unset it if set by default when using files
data.value = ""
}
if (data.value.length === 0) {
if (data.name.toLowerCase() === "headers") {
console.log("Should show headers field instead with + and -!")
// Check if file ID exists
//
const fileFound = selectedActionParameters.find(param => param.name === "file_id")
if (fileFound === undefined || fileFound === null) {
data.value = data.example
} else {
// Purposely unset it if set by default when using files
data.value = ""
}
}
}
}
}
/*
if (data.name !== "queries" && data.name !== "key" && data.name !== "value" ) {
@@ -1391,7 +1382,7 @@ const ParsedAction = (props) => {
var hideBodyButton = "";
const hideBodyButtonValue = (
<div
key={data.name}
key={data.name}
style={{
marginTop: 25,
border: "1px solid rgba(255,255,255,0.7)",
@@ -1403,7 +1394,7 @@ const ParsedAction = (props) => {
>
<Tooltip
color="secondary"
title={"Automatically change body"}
title={"Show all body fields"}
placement="top"
>
<FormControlLabel
@@ -1424,15 +1415,15 @@ const ParsedAction = (props) => {
for (let paramkey in Object.entries(selectedActionParameters)) {
var currentItem = selectedActionParameters[paramkey];
if (currentItem.name === "ssl_verify") {
if (currentItem.name === "ssl_verify") {
}
}
if (currentItem.name === "body") {
// FIXME: Workaround for toggling, as actions don't have IDs.
// May screw up something in the future.
currentItem.id = tag
}
if (currentItem.name === "body") {
// FIXME: Workaround for toggling, as actions don't have IDs.
// May screw up something in the future.
currentItem.id = tag
}
if (currentItem.description === openApiFieldDesc) {
currentItem.field_active = !hideBody;
@@ -1458,8 +1449,8 @@ const ParsedAction = (props) => {
if (found === null) {
setActivateHidingBodyButton(true);
} else {
//console.log("In found: ", found, hideBody)
}
//console.log("In found: ", found, hideBody)
}
} else {
//console.log("SHOW BUTTON");
@@ -1485,6 +1476,17 @@ const ParsedAction = (props) => {
}
changed = true;
var isRequired = false
// Check if original field name is in the selectedAction.required_body_fields
if (selectedAction.required_body_fields !== undefined && selectedAction.required_body_fields !== null) {
for (let innerkey in selectedAction.required_body_fields) {
if (selectedAction.required_body_fields[innerkey] === tmpitem) {
isRequired = true
break
}
}
}
selectedActionParameters.push({
action_field: "",
configuration: false,
@@ -1494,7 +1496,7 @@ const ParsedAction = (props) => {
multiline: true,
name: tmpitem,
options: null,
required: false,
required: isRequired,
schema: { type: "string" },
skip_multicheck: false,
tags: null,
@@ -2443,8 +2445,8 @@ const ParsedAction = (props) => {
//console.log(data.configuration)
const buttonTitle = `Authenticate ${selectedApp.name.replaceAll("_", " ")}`
const hasAutocomplete = data.autocompleted === true
const buttonTitle = `Authenticate ${selectedApp.name.replaceAll("_", " ")}`
const hasAutocomplete = data.autocompleted === true
return (
<div key={data.name}>
{hideBodyButton}
@@ -2669,8 +2671,6 @@ const ParsedAction = (props) => {
const { data, newActionname, newActiondescription, useIcon, extraDescription, } = actionprops;
const [hover, setHover] = React.useState(false);
console.log("Extra desc: ", extraDescription)
return (
<Tooltip
color="secondary"
@@ -2893,15 +2893,35 @@ const ParsedAction = (props) => {
>
<Tooltip
color="primary"
title={"Find related workflows"}
title={"Find related tworkflows"}
placement="top"
>
<a href={`https://shuffler.io/search?tab=workflows&q=${selectedAction.app_name}`} target="_blank">
<SearchIcon style={{ color: "rgba(255,255,255,0.7)"}} />
</a>
<a href={`https://shuffler.io/search?tab=workflows&q=${selectedAction.app_name}`} target="_blank">
<SearchIcon style={{ color: "rgba(255,255,255,0.7)"}} />
</a>
</Tooltip>
</IconButton>
<IconButton
style={{
marginTop: "auto",
marginBottom: "auto",
height: 30,
marginLeft: 15,
paddingRight: 0,
}}
onClick={() => {
// aiSubmit(aiMsg, undefined, undefined, newSelectedAction)
aiSubmit("Fill based on previous values", undefined, undefined, selectedAction)
}}
>
<Tooltip
color="primary"
title={"Autocompletes fields. Uses NAME of the action and previous values' results."}
placement="top"
>
<AutoFixHighIcon style={{ color: "rgba(255,255,255,0.7)", height: 24, }} />
</Tooltip>
</IconButton>
</div>
</div>
<div style={{ display: "flex", flexDirection: "column" }}>
@@ -2992,14 +3012,21 @@ const ParsedAction = (props) => {
defaultValue={selectedAction.label}
onChange={selectedNameChange}
onBlur={(e) => {
const name = e.target.value;
// Copy the name value
const name = e.target.value
const parsedBaseLabel = "$"+baselabel.toLowerCase().replaceAll(" ", "_")
const newname = "$"+name.toLowerCase().replaceAll(" ", "_")
console.log("NAME: ", name)
// Check if it's the same as the current name in use
//if (name === selectedAction.label) {
// console.log("Returning from name thing")
// return
//}
// Change in actions, triggers & conditions
// Highlight the changes somehow with a glow?
//
// Should make it a function lol
if (workflow.branches !== undefined && workflow.branches !== null) {
for (let [key,keyval] in Object.entries(workflow.branches)) {
if (workflow.branches[key].conditions !== undefined && workflow.branches[key].conditions !== null) {
@@ -3117,7 +3144,13 @@ const ParsedAction = (props) => {
continue
}
for (let [subkey, subkeyval] in Object.entries(workflow.actions[key].parameters)) {
const params = workflow.actions[key].parameters
console.log(params)
if (params === null || params === undefined) {
continue
}
for (let [subkey, subkeyval] in Object.entries(params)) {
const param = workflow.actions[key].parameters[subkey];
if (!param.value.includes("$")) {
continue
@@ -3179,7 +3212,7 @@ const ParsedAction = (props) => {
console.log("DID NAME REPLACE ACTUALLY WORK? - may be missing it in certain triggers");
setWorkflow(workflow);
setUpdate(Math.random());
setUpdate(Math.random());
baselabel = name
}}
/>
@@ -3240,7 +3273,7 @@ const ParsedAction = (props) => {
}}
>
<AddIcon style={{ marginRight: 10 }} /> Authenticate{" "}
{selectedApp.name}
{selectedApp.name.replaceAll("_", " ")}
</Button>
</span>
</Tooltip>
@@ -3573,8 +3606,6 @@ const ParsedAction = (props) => {
data.label = "No name"
}
console.log("Name: ", newActionname)
newActionname = (newActionname.charAt(0).toUpperCase() + newActionname.substring(1)).replaceAll("_", " ");
var method = ""
frontend/src/components/Searchfield.jsx
+9 -1
View File
@@ -43,6 +43,7 @@ const SearchField = props => {
const node = useRef()
const [searchOpen, setSearchOpen] = useState(false)
const [oldPath, setOldPath] = useState("")
const [value, setValue] = useState("");
if (serverside === true) {
return null
@@ -67,7 +68,13 @@ const SearchField = props => {
//}, searchOpen)
const SearchBox = ({currentRefinement, refine, isSearchStalled, } ) => {
const keyPressHandler = (e) => {
// e.preventDefault();
if (e.which === 13) {
// alert("You pressed enter!");
navigate("/search?q=" + currentRefinement, { state: value, replace: true });
}
};
/*
endAdornment: (
<InputAdornment position="end" style={{textAlign: "right", zIndex: 5001, cursor: "pointer", width: 100, }} onMouseOver={(event) => {
@@ -108,6 +115,7 @@ const SearchField = props => {
color="primary"
placeholder="Find Public Apps, Workflows, Documentation..."
value={currentRefinement}
onKeyDown={keyPressHandler}
id="shuffle_search_field"
onClick={(event) => {
if (!searchOpen) {
frontend/src/components/ShuffleCodeEditor.jsx
+3
View File
@@ -205,6 +205,9 @@ const CodeEditor = (props) => {
setAvailableVariables(allVariables)
setMainVariables(tmpVariables)
console.log("Checking local codedata: ", localcodedata)
expectedOutput(localcodedata)
}, [])
const aiSubmit = (value, inputAction) => {
frontend/src/components/WorkflowGrid.jsx
+6
View File
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
import {Link} from 'react-router-dom';
import theme from '../theme.jsx';
import { removeQuery } from '../components/ScrollToTop.jsx';
import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@mui/icons-material';
@@ -171,6 +172,7 @@ const AppGrid = props => {
// value={currentRefinement}
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
var defaultSearch = ""
useEffect(() => {
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search)
@@ -179,6 +181,7 @@ const AppGrid = props => {
if (foundQuery !== null && foundQuery !== undefined) {
console.log("Got query: ", foundQuery)
refine(foundQuery)
defaultSearch = foundQuery
}
}
}, [])
@@ -187,6 +190,7 @@ const AppGrid = props => {
console.log("In refinement: ", inputsearch)
//setLocalMessage(inputsearch)
refine(inputsearch)
defaultSearch = inputsearch
} else if (onlyResults === true) {
// Don't return anything unless refinement works
return null
@@ -196,6 +200,7 @@ const AppGrid = props => {
<form noValidate action="" role="search">
{onlyResults !== true ?
<TextField
defaultValue={defaultSearch}
fullWidth
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
InputProps={{
@@ -214,6 +219,7 @@ const AppGrid = props => {
placeholder="Find Workflows..."
id="shuffle_search_field"
onChange={(event) => {
removeQuery("q")
refine(event.currentTarget.value)
}}
limit={5}