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

Lightmode/Darkmode merge including many fixes since 2.0.2

Browse Source
This commit is contained in:
Frikky
2025-05-19 00:04:37 +02:00
parent 7bc246c003
commit a4ebf3e558
59 changed files with 5931 additions and 2961 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/AppCreator.jsx
+170 -142
View File
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useContext } from "react";
import { makeStyles } from "@mui/styles";
import { BrowserView, MobileView } from "react-device-detect";
import theme from '../theme.jsx';
import { getTheme } from '../theme.jsx';
import {
Paper,
@@ -57,6 +57,7 @@ import { ToastContainer, toast } from "react-toastify"
import words from "shellwords";
import AvatarEditor from "react-avatar-editor";
import { Context } from "../context/ContextApi.jsx";
const surfaceColor = "#27292D";
const inputColor = "#383B40";
@@ -67,33 +68,7 @@ const bodyDivStyle = {
zoom: 0.8,
};
const actionListStyle = {
paddingLeft: "10px",
paddingRight: "10px",
paddingBottom: "10px",
paddingTop: "10px",
marginTop: "5px",
display: "flex",
color: "white",
position: "relative",
backgroundColor: theme.palette.platformColor,
};
const boxStyle = {
color: "white",
flex: "1",
marginLeft: "10px",
marginRight: "10px",
paddingLeft: "30px",
paddingRight: "30px",
paddingBottom: "30px",
paddingTop: "30px",
display: "flex",
flexDirection: "column",
backgroundColor: theme.palette.backgroundColor,
};
const dividerStyle = {
marginBottom: "10px",
@@ -427,9 +402,40 @@ const AppCreator = (defaultprops) => {
const [actionAmount, setActionAmount] = useState(increaseAmount);
const [newAppGroup, setNewAppGroup] = useState("")
const { themeMode, supportEmail, brandColor } = useContext(Context);
const theme = getTheme(themeMode, brandColor);
const [oauth2Scopes, setOauth2Scopes] = useState([]);
const [oauth2Type, setOauth2Type] = useState("delegated");
const actionListStyle = {
paddingLeft: "10px",
paddingRight: "10px",
paddingBottom: "10px",
paddingTop: "10px",
marginTop: "5px",
display: "flex",
color: theme.palette.text.primary,
position: "relative",
backgroundColor: theme.palette.platformColor,
};
const boxStyle = {
color: theme.palette.text.primary,
flex: "1",
marginLeft: "10px",
marginRight: "10px",
paddingLeft: "30px",
paddingRight: "30px",
paddingBottom: "30px",
paddingTop: "30px",
display: "flex",
flexDirection: "column",
backgroundColor: theme.palette.platformColor,
};
//client_credentials
const [oauth2GrantType, setOauth2GrantType] = useState("");
const defaultAuth = {
@@ -2626,7 +2632,7 @@ const AppCreator = (defaultprops) => {
if (response.status === 403) {
var urlParams = new URLSearchParams(window.location.search)
if (urlParams.has("id")) {
toast.error("Please log in to build this app. If this error persists, please contact support@shuffler.io")
toast.error(`Please log in to build this app. If this error persists, please contact ${supportEmail}`)
} else {
toast.error("Failed to save the app as you are not the owner. Redirecting you to the forking page. When there, save again.")
if (props.match.params.appid !== undefined && props.match.params.appid !== null && props.match.params.appid.length > 0) {
@@ -2678,12 +2684,12 @@ const AppCreator = (defaultprops) => {
const bearerAuth =
authenticationOption === "Bearer auth" ? (
<div style={{ color: "white" }}>
<div style={{ color: theme.palette.text.primary }}>
<h4>
<a
target="_blank"
href="https://swagger.io/docs/specification/authentication/bearer-authentication/"
style={{ textDecoriation: "none", color: "#f85a3e" }}
style={{ textDecoriation: "none", color: theme.palette.linkColor }}
>
Bearer auth
</a>
@@ -2696,12 +2702,12 @@ const AppCreator = (defaultprops) => {
// Basicauth
const basicAuth =
authenticationOption === "Basic auth" ? (
<div style={{ color: "white" }}>
<div style={{ color: theme.palette.text.primary }}>
<h4>
<a
target="_blank"
href="https://swagger.io/docs/specification/authentication/basic-authentication/"
style={{ textDecoriation: "none", color: "#f85a3e" }}
style={{ textDecoriation: "none", color: theme.palette.linkColor }}
>
Basic authentication
</a>
@@ -2795,7 +2801,7 @@ const AppCreator = (defaultprops) => {
flex: 2,
marginTop: 0,
marginBottom: 0,
backgroundColor: inputColor,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
marginRight: 5,
}}
fullWidth={true}
@@ -2813,7 +2819,8 @@ const AppCreator = (defaultprops) => {
notchedOutline: classes.notchedOutline,
},
style: {
color: "white",
color: theme.palette.textFieldStyle.color,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
minHeight: 50,
marginLeft: 5,
maxWidth: "95%",
@@ -2828,7 +2835,7 @@ const AppCreator = (defaultprops) => {
marginTop: 0,
marginBottom: 0,
flex: 2,
backgroundColor: inputColor,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
marginRight: 5,
}}
fullWidth={true}
@@ -2843,7 +2850,8 @@ const AppCreator = (defaultprops) => {
}}
InputProps={{
style: {
color: "white",
color: theme.palette.textFieldStyle.color,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
minHeight: 50,
marginLeft: 5,
maxWidth: "95%",
@@ -2861,9 +2869,9 @@ const AppCreator = (defaultprops) => {
value={extraAuth[index].type}
style={{
flex: 1,
backgroundColor: inputColor,
backgroundColor: theme.palette.backgroundColor,
paddingLeft: "10px",
color: "white",
color: theme.palette.text.primary,
height: 50,
borderRadius: theme.shape.borderRadius,
}}
@@ -2874,14 +2882,14 @@ const AppCreator = (defaultprops) => {
>
<MenuItem
key={index}
style={{ backgroundColor: inputColor, color: "white" }}
style={{ backgroundColor: theme.palette.backgroundColor, color: theme.palette.text.primary }}
value={"header"}
>
Header
</MenuItem>
<MenuItem
key={index}
style={{ backgroundColor: inputColor, color: "white" }}
style={{ backgroundColor: theme.palette.backgroundColor, color: theme.palette.text.primary }}
value={"query"}
>
Query
@@ -2929,7 +2937,7 @@ const AppCreator = (defaultprops) => {
const jwtAuth =
authenticationOption === "JWT" ? (
<div style={{ color: "white", marginTop: 20 }}>
<div style={{ color: theme.palette.text.primary, marginTop: 20 }}>
<Typography variant="body1">JWT authentication</Typography>
<Typography
variant="body2"
@@ -2948,7 +2956,7 @@ const AppCreator = (defaultprops) => {
variant="outlined"
defaultValue={parameterName}
helperText={
<span style={{ color: "white", marginBottom: "2px" }}>
<span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
Must start with / and be a valid path
</span>
}
@@ -2958,7 +2966,7 @@ const AppCreator = (defaultprops) => {
notchedOutline: classes.notchedOutline,
},
style: {
color: "white",
color: theme.palette.text.primary,
},
}}
/>
@@ -2979,7 +2987,7 @@ const AppCreator = (defaultprops) => {
variant="outlined"
defaultValue={parameterName}
helperText={
<span style={{ color: "white", marginBottom: "2px" }}>
<span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
Must use 'key=value&key=value' format
</span>
}
@@ -2991,7 +2999,7 @@ const AppCreator = (defaultprops) => {
notchedOutline: classes.notchedOutline,
},
style: {
color: "white",
color: theme.palette.text.primary,
},
}}
/>
@@ -3001,7 +3009,7 @@ const AppCreator = (defaultprops) => {
const oauth2Auth =
authenticationOption === "Oauth2" ? (
<div style={{ color: "white", marginTop: 20 }}>
<div style={{ color: theme.palette.text.primary, marginTop: 20 }}>
<Typography variant="body1">Oauth2 authentication</Typography>
<Typography
variant="body2"
@@ -3060,7 +3068,7 @@ const AppCreator = (defaultprops) => {
notchedOutline: classes.notchedOutline,
},
style: {
color: "white",
color: theme.palette.text.primary,
},
}}
/>
@@ -3111,7 +3119,7 @@ const AppCreator = (defaultprops) => {
notchedOutline: classes.notchedOutline,
},
style: {
color: "white",
color: theme.palette.text.primary,
},
}}
/>
@@ -3160,7 +3168,7 @@ const AppCreator = (defaultprops) => {
}}
InputProps={{
style: {
color: "white",
color: theme.palette.text.primary,
},
}}
/>
@@ -3177,7 +3185,7 @@ const AppCreator = (defaultprops) => {
required
InputProps={{
style: {
color: "white",
color: theme.palette.text.primary,
maxHeight: 160,
},
}}
@@ -3202,7 +3210,7 @@ const AppCreator = (defaultprops) => {
const apiKey =
authenticationOption === "API key" ? (
<div style={{ color: "white", marginTop: 20 }}>
<div style={{ color: theme.palette.text.primary, marginTop: 20 }}>
<Typography variant="body1">API key authentication</Typography>
<Typography variant="body2" color="textSecondary">
<b>Do NOT put your actual API-key.</b> Add the name of the field used for authentication, e.g. "X-APIKEY".
@@ -3221,7 +3229,7 @@ const AppCreator = (defaultprops) => {
variant="outlined"
value={parameterName}
helperText={
<span style={{ color: "white", marginBottom: "2px" }}>
<span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
Can't be empty or contain any of the following: !#$%&'^"+-._~|]+$:=
</span>
}
@@ -3238,7 +3246,7 @@ const AppCreator = (defaultprops) => {
notchedOutline: classes.notchedOutline,
},
style: {
color: "white",
color: theme.palette.text.primary,
},
}}
/>
@@ -3255,7 +3263,7 @@ const AppCreator = (defaultprops) => {
borderRadius: theme.shape.borderRadius,
backgroundColor: inputColor,
paddingLeft: 10,
color: "white",
color: theme.palette.text.primary,
height: 57,
}}
inputProps={{
@@ -3271,7 +3279,7 @@ const AppCreator = (defaultprops) => {
return (
<MenuItem
key={index}
style={{ backgroundColor: inputColor, color: "white" }}
style={{ backgroundColor: inputColor, color: theme.palette.text.primary }}
value={data}
>
{data}
@@ -3463,15 +3471,14 @@ const AppCreator = (defaultprops) => {
<Tooltip title={chipRequired ? "Make not required" : "Make required"}>
<Chip
style={{
backgroundColor: chipRequired ? "#f86a3e" : "#3d3f43",
backgroundColor: chipRequired ? "#f86a3e" : theme.palette.chipStyle.backgroundColor,
height: 30,
margin: 3,
paddingLeft: 5,
paddingRight: 5,
height: 28,
cursor: "pointer",
borderColor: "#3d3f43",
color: "white",
borderColor: theme.palette.chipStyle.borderColor,
color: theme.palette.chipStyle.color,
}}
label={parsedChip}
onClick={() => {
@@ -3557,7 +3564,7 @@ const AppCreator = (defaultprops) => {
placeholder={"Query name (key)"}
label={"Query Key"}
helperText={
<span style={{ color: "white", marginBottom: "2px" }}>
<span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
Click required to flip
</span>
}
@@ -3569,7 +3576,7 @@ const AppCreator = (defaultprops) => {
style={{flex: 3}}
InputProps={{
style: {
color: "white",
color: theme.palette.text.primary,
},
}}
/>
@@ -3589,7 +3596,7 @@ const AppCreator = (defaultprops) => {
style={{flex: 2}}
InputProps={{
style: {
color: "white",
color: theme.palette.text.primary,
},
}}
/>
@@ -3662,7 +3669,7 @@ const AppCreator = (defaultprops) => {
)}
<TextField
required
style={{ flex: "1", marginRight: "15px", backgroundColor: inputColor }}
style={{ flex: "1", marginRight: "15px", backgroundColor: theme.palette.textFieldStyle.backgroundColor }}
fullWidth={true}
placeholder={
'{\n\t"example": "${example}",\n\t"apikey": "${apikey}",\n\t"search": "1.2.3.5"\n}'
@@ -3678,7 +3685,7 @@ const AppCreator = (defaultprops) => {
}}
key={currentAction}
helperText={
<span style={{ color: "white", marginBottom: "2px" }}>
<span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
Shows an example body to the user. ${} creates variables.
</span>
}
@@ -3687,7 +3694,8 @@ const AppCreator = (defaultprops) => {
notchedOutline: classes.notchedOutline,
},
style: {
color: "white",
color: theme.palette.textFieldStyle.color,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
},
}}
/>
@@ -3700,7 +3708,7 @@ const AppCreator = (defaultprops) => {
<b>Example success response</b>
<TextField
required
style={{ flex: "1", marginRight: "15px", backgroundColor: inputColor }}
style={{ flex: "1", marginRight: "15px", backgroundColor: theme.palette.textFieldStyle.backgroundColor }}
fullWidth={true}
placeholder={
'{\n\t"email": "testing@test.com",\n\t"firstname": "testing"\n}'
@@ -3712,14 +3720,15 @@ const AppCreator = (defaultprops) => {
defaultValue={currentAction["example_response"]}
onChange={(e) => setActionField("example_response", e.target.value)}
helperText={
<span style={{ color: "white", marginBottom: "2px" }}>
<span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
Helps with autocompletion and understanding of the endpoint
</span>
}
key={currentAction}
InputProps={{
style: {
color: "white",
color: theme.palette.textFieldStyle.color,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
},
}}
/>
@@ -3794,8 +3803,8 @@ const AppCreator = (defaultprops) => {
fullWidth
PaperProps={{
style: {
backgroundColor: surfaceColor,
color: "white",
backgroundColor: theme.palette.drawer.backgroundColor,
color: theme.palette.text.primary,
minWidth: 700,
maxWidth: 700,
},
@@ -3812,15 +3821,15 @@ const AppCreator = (defaultprops) => {
setFileUploadEnabled(false);
}}
>
<FormControl style={{ backgroundColor: surfaceColor, color: "white" }}>
<FormControl style={{ backgroundColor: theme.palette.drawer.backgroundColor, color: theme.palette.text.primary }}>
<DialogTitle style={{marginTop: 45, }}>
<div style={{ color: "white" }}>New action</div>
<div style={{ color: theme.palette.text.primary }}>New action</div>
</DialogTitle>
<DialogContent style={{paddingBottom: 100, }}>
<a
target="_blank"
href="https://shuffler.io/docs/app_creation#actions"
style={{ textDecoration: "none", color: "#f85a3e" }}
style={{ textDecoration: "none", color: theme.palette.linkColor }}
>
Learn more about actions
</a>
@@ -3832,7 +3841,8 @@ const AppCreator = (defaultprops) => {
flex: "1",
marginTop: 5,
marginRight: 15,
backgroundColor: inputColor,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
color: theme.palette.textFieldStyle.color,
}}
fullWidth={true}
placeholder="Name"
@@ -3871,7 +3881,8 @@ const AppCreator = (defaultprops) => {
notchedOutline: classes.notchedOutline,
},
style: {
color: "white",
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
color: theme.palette.textFieldStyle.color,
},
}}
/>
@@ -3883,7 +3894,8 @@ const AppCreator = (defaultprops) => {
flex: "1",
marginTop: 5,
marginRight: "15px",
backgroundColor: inputColor,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
color: theme.palette.textFieldStyle.color,
}}
fullWidth={true}
placeholder="Description"
@@ -3895,7 +3907,8 @@ const AppCreator = (defaultprops) => {
onChange={(e) => setActionField("description", e.target.value)}
InputProps={{
style: {
color: "white",
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
color: theme.palette.textFieldStyle.color,
},
}}
/>
@@ -3917,14 +3930,18 @@ const AppCreator = (defaultprops) => {
}}
value={currentActionMethod}
style={{
backgroundColor: inputColor,
paddingLeft: "10px",
color: "white",
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
color: theme.palette.textFieldStyle.color,
height: "50px",
}}
inputProps={{
name: "Method",
id: "method-option",
style: {
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
color: theme.palette.textFieldStyle.color,
},
}}
>
@@ -3939,7 +3956,7 @@ const AppCreator = (defaultprops) => {
>
<Chip
style={{
color: "white",
color: theme.palette.text.primary,
borderRadius: theme.shape.borderRadius,
minWidth: 80,
marginRight: 10,
@@ -3963,7 +3980,8 @@ const AppCreator = (defaultprops) => {
flex: "1",
marginRight: "15px",
marginTop: "5px",
backgroundColor: inputColor,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
color: theme.palette.textFieldStyle.color,
}}
fullWidth={true}
placeholder="URL path"
@@ -3976,7 +3994,7 @@ const AppCreator = (defaultprops) => {
setUrlPath(e.target.value);
}}
helperText={
<span style={{ color: "white", marginBottom: "2px" }}>
<span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
The path to use. Must start with /. Use {"{variablename}"} to
have path variables
</span>
@@ -3987,7 +4005,8 @@ const AppCreator = (defaultprops) => {
input: classes.input,
},
style: {
color: "white",
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
color: theme.palette.textFieldStyle.color,
},
}}
onBlur={(event) => {
@@ -4270,7 +4289,7 @@ const AppCreator = (defaultprops) => {
defaultValue={currentAction["file_field"]}
onChange={(e) => setActionField("file_field", e.target.value)}
helperText={
<span style={{ color: "white", marginBottom: "2px" }}>
<span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
The File field to interact with
</span>
}
@@ -4279,7 +4298,7 @@ const AppCreator = (defaultprops) => {
notchedOutline: classes.notchedOutline,
},
style: {
color: "white",
color: theme.palette.text.primary,
},
}}
/>
@@ -4294,7 +4313,8 @@ const AppCreator = (defaultprops) => {
flex: "1",
marginRight: "15px",
marginTop: "5px",
backgroundColor: inputColor,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
color: theme.palette.textFieldStyle.color,
}}
fullWidth={true}
placeholder={
@@ -4308,13 +4328,14 @@ const AppCreator = (defaultprops) => {
minRows="2"
onChange={(e) => setActionField("headers", e.target.value)}
helperText={
<span style={{ color: "white", marginBottom: "2px" }}>
<span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
Headers that are part of the request. Default: EMPTY
</span>
}
InputProps={{
style: {
color: "white",
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
color: theme.palette.textFieldStyle.color,
},
}}
/>
@@ -4323,14 +4344,14 @@ const AppCreator = (defaultprops) => {
{bodyInfo}
<Divider
style={{
backgroundColor: "rgba(255,255,255,0.5)",
backgroundColor: theme.palette.defaultBorder,
marginTop: 15,
marginBottom: 15,
}}
/>
{exampleResponse}
</DialogContent>
<div style={{position: "fixed", backgroundColor: theme.palette.surfaceColor, bottom: 0, width: "100%", padding: 25, borderTop: "1px solid rgba(255,255,255,0.3)", }}>
<div style={{position: "fixed", backgroundColor: theme.palette.drawer.backgroundColor, bottom: 0, width: "100%", padding: 25, borderTop: theme.palette.defaultBorder, }}>
<Button
color="primary"
variant={urlPath.length > 0 ? "contained" : "outlined"}
@@ -4449,7 +4470,7 @@ const AppCreator = (defaultprops) => {
<Chip
style={{
backgroundColor: bgColor,
color: "white",
color: theme.palette.text.primary,
borderRadius: theme.shape.borderRadius,
minWidth: 80,
marginRight: 10,
@@ -4501,9 +4522,9 @@ const AppCreator = (defaultprops) => {
style={{
border: data.action_label === undefined || data.action_label === "No Label" ? "" : `2px solid ${bgColor}`,
borderRadius: theme.shape.borderRadius,
backgroundColor: inputColor,
backgroundColor: theme.palette.backgroundColor,
paddingLeft: 10,
color: "white",
color: theme.palette.text.primary,
height: 30,
maxWidth: 35,
marginLeft: 10,
@@ -4620,13 +4641,13 @@ const AppCreator = (defaultprops) => {
const tagView = (
<div style={{ color: "white" }}>
<div style={{ color: theme.palette.text.primary }}>
{/*
<ChipInput
style={{marginTop: 10}}
InputProps={{
style:{
color: "white",
color: theme.palette.text.primary,
},
}}
placeholder="Categories"
@@ -4661,7 +4682,7 @@ const AppCreator = (defaultprops) => {
}}
value={newWorkflowCategories.length === 0 ? "Select a category" : newWorkflowCategories[0]}
style={{ backgroundColor: inputColor, color: "white", height: "50px" }}
style={{ backgroundColor: theme.palette.backgroundColor, color: theme.palette.text.primary, height: "50px" }}
>
{categories.map((data, index) => {
if (data === undefined || data === null || data === "" || data === undefined || data === null || data === "") {
@@ -4671,7 +4692,7 @@ const AppCreator = (defaultprops) => {
return (
<MenuItem
key={index}
style={{ backgroundColor: inputColor, color: "white" }}
sx={{ backgroundColor: theme.palette.backgroundColor, color: theme.palette.text.primary, "&:hover" : { backgroundColor: theme.palette.hoverColor} }}
value={data.name}
>
{data.name}
@@ -4701,7 +4722,7 @@ const AppCreator = (defaultprops) => {
}}
InputProps={{
style: {
color: "white",
color: theme.palette.text.primary,
},
}}
/>
@@ -4713,7 +4734,7 @@ const AppCreator = (defaultprops) => {
style={{ marginTop: 10 }}
InputProps={{
style: {
color: "white",
color: theme.palette.text.primary,
},
}}
placeholder="Tags"
@@ -4786,7 +4807,7 @@ const AppCreator = (defaultprops) => {
}}
InputProps={{
style: {
color: "white",
color: theme.palette.text.primary,
height: 50,
fontSize: "1em",
},
@@ -5101,7 +5122,7 @@ const AppCreator = (defaultprops) => {
/*
{selectedAction.authentication.map(data => (
<MenuItem key={data.id} style={{backgroundColor: inputColor, color: "white"}} value={data}>
<MenuItem key={data.id} style={{backgroundColor: inputColor, color: theme.palette.text.primary}} value={data}>
*/
};
@@ -5120,7 +5141,7 @@ const AppCreator = (defaultprops) => {
target="_blank"
rel="norefferer"
href="https://shuffler.io/docs/app_creation#authentication"
style={{ textDecoration: "none", color: "#f85a3e" }}
style={{ textDecoration: "none", color: theme.palette.linkColor }}
>
What is this?
</a>
@@ -5135,7 +5156,7 @@ const AppCreator = (defaultprops) => {
}}
InputProps={{
style: {
color: "white",
color: theme.palette.text.primary,
marginLeft: "5px",
maxWidth: "95%",
height: 50,
@@ -5175,7 +5196,7 @@ const AppCreator = (defaultprops) => {
}}
InputProps={{
style: {
color: "white",
color: theme.palette.text.primary,
marginLeft: "5px",
maxWidth: "95%",
height: 50,
@@ -5225,7 +5246,7 @@ const AppCreator = (defaultprops) => {
};
const actionView = (
<div style={{ color: "white", position: "relative" }}>
<div style={{ color: theme.palette.text.primary, position: "relative" }}>
<div style={{ position: "absolute", right: 0, top: 0 }}>
{actionAmount > 0 && actionAmount < filteredActions.length ? (
<Button
@@ -5277,15 +5298,14 @@ const AppCreator = (defaultprops) => {
key={index}
style={{
backgroundColor:
tag === selectedCategory ? "#f86a3e" : "#3d3f43",
tag === selectedCategory ? "#f86a3e" : theme.palette.chipStyle.backgroundColor,
height: 30,
margin: 3,
paddingLeft: 5,
paddingRight: 5,
height: 28,
cursor: "pointer",
borderColor: "#3d3f43",
color: "white",
borderColor: theme.palette.chipStyle.borderColor,
color: theme.palette.chipStyle.color,
}}
label={newname}
onClick={() => {
@@ -5411,13 +5431,13 @@ const AppCreator = (defaultprops) => {
);
const testView = (
<div style={{ color: "white" }}>
<div style={{ color: theme.palette.text.primary }}>
<h2>Test</h2>
Test an action to see whether it performs in an expected way.
<a
target="_blank"
href="https://shuffler.io/docs/app_creation#testing"
style={{ textDecoration: "none", color: "#f85a3e" }}
style={{ textDecoration: "none", color: theme.palette.linkColor }}
>
&nbsp;TBD: Click here to learn more about testing
</a>
@@ -5572,7 +5592,7 @@ const AppCreator = (defaultprops) => {
PaperProps={{
style: {
backgroundColor: surfaceColor,
color: "white",
color: theme.palette.text.primary,
minWidth: "300px",
minHeight: "300px",
},
@@ -5721,7 +5741,7 @@ const AppCreator = (defaultprops) => {
PaperProps={{
style: {
backgroundColor: surfaceColor,
color: "white",
color: theme.palette.text.primary,
minWidth: "800px",
minHeight: "320px",
},
@@ -5741,7 +5761,7 @@ const AppCreator = (defaultprops) => {
margin="normal"
InputProps={{
style: {
color: "white",
color: theme.palette.text.primary,
height: "50px",
fontSize: "1em",
},
@@ -5768,7 +5788,7 @@ const AppCreator = (defaultprops) => {
setOpenApi(e.target.value);
}}
helperText={
<span style={{ color: "white", marginBottom: "2px" }}>
<span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
Must point to a version 2 or 3 OpenAPI specification.
</span>
}
@@ -5832,14 +5852,14 @@ const AppCreator = (defaultprops) => {
// Random names for type & autoComplete. Didn't research :^)
const landingpageDataBrowser = (
<div style={{ paddingBottom: 100, color: "white" }}>
<div style={{ paddingBottom: 100, color: theme.palette.text.primary, }}>
<Breadcrumbs
aria-label="breadcrumb"
separator="›"
style={{ color: "white" }}
style={{ color: theme.palette.text.primary }}
>
<Link to="/apps" style={{ textDecoration: "none", color: "inherit" }}>
<h2 style={{ color: "rgba(255,255,255,0.5)" }}>
<h2 style={{ color: theme.palette.textColor }}>
<AppsIcon style={{ marginRight: 10 }} />
Apps
</h2>
@@ -5860,10 +5880,10 @@ const AppCreator = (defaultprops) => {
ref={(ref) => (upload = ref)}
onChange={editHeaderImage}
/>
<Paper style={boxStyle}>
<div style={boxStyle}>
<div style={{display: "flex", }}>
<div style={{flex: 1, }}>
<h2 style={{ marginBottom: "10px", color: "white" }}>
<h2 style={{ marginBottom: "10px", color: theme.palette.text.primary }}>
General information
</h2>
</div>
@@ -5907,13 +5927,13 @@ const AppCreator = (defaultprops) => {
<a
target="_blank"
href="https://shuffler.io/docs/app_creation#app-creator-instructions"
style={{ textDecoration: "none", color: "#f85a3e" }}
style={{ textDecoration: "none", color: theme.palette.linkColor }}
>
Click to learn more about app creation
</a>
<div
style={{
color: "white",
color: theme.palette.text.primary,
flex: "1",
display: "flex",
flexDirection: "row",
@@ -5944,7 +5964,7 @@ const AppCreator = (defaultprops) => {
/>
</div>
</Tooltip>
<div style={{ flex: "3", color: "white", marginLeft: 20, }}>
<div style={{ flex: "3", color: theme.palette.text.primary, marginLeft: 20, }}>
<div style={{ marginTop: "10px" }} />
Name
<TextField
@@ -5953,7 +5973,7 @@ const AppCreator = (defaultprops) => {
flex: "1",
marginTop: "5px",
marginRight: "15px",
backgroundColor: inputColor,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
}}
fullWidth={true}
placeholder="Name"
@@ -5989,7 +6009,8 @@ const AppCreator = (defaultprops) => {
color="primary"
InputProps={{
style: {
color: "white",
color: theme.palette.textFieldStyle.color,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
height: "50px",
fontSize: "1em",
},
@@ -6005,13 +6026,19 @@ const AppCreator = (defaultprops) => {
style={{
marginTop: 5,
marginRight: 15,
backgroundColor: inputColor,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
maxHeight: 250,
overflowY: "auto"
}}
fullWidth={true}
type="name"
id="outlined-with-placeholder"
inputProps={{
style: {
color: theme.palette.textFieldStyle.color,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
}
}}
margin="normal"
multiline
variant="outlined"
@@ -6033,7 +6060,7 @@ const AppCreator = (defaultprops) => {
/>
<Typography
variant="h6"
style={{ marginTop: 10, marginBottom: 10, color: "white" }}
style={{ marginTop: 10, marginBottom: 10, color: theme.palette.text.primary }}
>
API information
</Typography>
@@ -6042,14 +6069,15 @@ const AppCreator = (defaultprops) => {
</Typography>
<TextField
color="primary"
style={{ backgroundColor: inputColor, marginTop: "5px" }}
style={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, marginTop: "5px" }}
InputProps={{
classes: {
notchedOutline: classes.notchedOutline,
},
style: {
height: "50px",
color: "white",
color: theme.palette.textFieldStyle.color,
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
fontSize: "1em",
},
}}
@@ -6061,7 +6089,7 @@ const AppCreator = (defaultprops) => {
variant="outlined"
value={baseUrl}
helperText={
<span style={{ color: "white", marginBottom: "2px" }}>
<span style={{ color: theme.palette.text.primary, marginBottom: "2px" }}>
Must start with http(s):// and CANT end with /.{" "}
</span>
}
@@ -6098,7 +6126,7 @@ const AppCreator = (defaultprops) => {
<a
target="_blank"
href="https://shuffler.io/docs/app_creation#authentication"
style={{ textDecoration: "none", color: "#f85a3e" }}
style={{ textDecoration: "none", color: theme.palette.linkColor }}
>
Learn more about app authentication
</a>
@@ -6122,15 +6150,15 @@ const AppCreator = (defaultprops) => {
}}
value={authenticationOption}
style={{
backgroundColor: inputColor,
color: "white",
backgroundColor: theme.palette.backgroundColor,
color: theme.palette.text.primary,
height: "50px",
}}
>
{authenticationOptions.map((data, index) => (
<MenuItem
key={index}
style={{ backgroundColor: inputColor, color: "white" }}
sx={{ backgroundColor: theme.palette.backgroundColor, color: theme.palette.text.primary, "&:hover": {backgroundColor: theme.palette.backgroundColor} }}
value={data}
>
{data}
@@ -6165,14 +6193,14 @@ const AppCreator = (defaultprops) => {
value={oauth2Type}
style={{
backgroundColor: inputColor,
color: "white",
color: theme.palette.text.primary,
height: "50px",
}}
>
{["delegated", "application"].map((data, index) => (
<MenuItem
key={index}
style={{ backgroundColor: inputColor, color: "white" }}
style={{ backgroundColor: inputColor, color: theme.palette.text.primary }}
value={data}
>
{data}
@@ -6193,14 +6221,14 @@ const AppCreator = (defaultprops) => {
value={oauth2GrantType}
style={{
backgroundColor: inputColor,
color: "white",
color: theme.palette.text.primary,
height: "50px",
}}
>
{["client_credentials", "password"].map((data, index) => (
<MenuItem
key={index}
style={{ backgroundColor: inputColor, color: "white" }}
style={{ backgroundColor: inputColor, color: theme.palette.text.primary }}
value={data}
>
{data}
@@ -6225,8 +6253,8 @@ const AppCreator = (defaultprops) => {
{/*authenticationOption === "No authentication" ? null :
<FormControlLabel
style={{color: "white", marginBottom: 0, marginTop: 20}}
label=<div style={{color: "white"}}>Authentication required (default true)</div>
style={{color: theme.palette.text.primary, marginBottom: 0, marginTop: 20}}
label=<div style={{color: theme.palette.text.primary}}>Authentication required (default true)</div>
control={<Switch checked={authenticationRequired} onChange={() => {
setAuthenticationRequired(!authenticationRequired)
}} />}
@@ -6321,7 +6349,7 @@ const AppCreator = (defaultprops) => {
{errorCode.length > 0 ? `Upload Error: ${errorCode}` : null}
</Typography>
</Paper>
</div>
</div>
);