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

Fixed most of the new MUI problems. Missing /admin and other button disabled issues

Browse Source
This commit is contained in:
Frikky
2023-07-13 01:53:27 +02:00
parent b812f54b0f
commit b9a25ee537
26 changed files with 175 additions and 1011 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Admin.jsx
+27 -29
View File
@@ -2343,22 +2343,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
</div>
) : (
<div>
{/*
<Tooltip
title={"Go to Organization document"}
style={{}}
aria-label={"Organization doc"}
>
<IconButton
style={{ top: -10, right: 50, position: "absolute" }}
onClick={() => {
console.log("Should go to icon")
}}
>
<FileCopyIcon style={{ color: "rgba(255,255,255,0.8)" }} />
</IconButton>
</Tooltip>
*/}
{userdata.support === true ?
<span style={{display: "flex", top: -10, right: 50, position: "absolute"}}>
@@ -2407,6 +2391,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
style={{}}
aria-label={"Copy orgid"}
>
<div>
<IconButton
style={{ top: -10, right: 0, position: "absolute" }}
onClick={() => {
@@ -2436,6 +2421,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
>
<FileCopyIcon style={{ color: "rgba(255,255,255,0.8)" }} />
</IconButton>
</div>
</Tooltip>
{selectedOrganization.defaults !== undefined && selectedOrganization.defaults.documentation_reference !== undefined && selectedOrganization.defaults.documentation_reference !== null && selectedOrganization.defaults.documentation_reference.includes("http") ?
<Tooltip
@@ -2443,6 +2429,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
style={{ top: -10, right: 50, position: "absolute" }}
aria-label={"Open org docs"}
>
<div>
<a href={selectedOrganization.defaults.documentation_reference} target="_blank" style={{ textDecoration: "none", }} rel="noopener noreferrer">
<IconButton
style={{ top: -10, right: 50, position: "absolute" }}
@@ -2450,6 +2437,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
<DescriptionIcon style={{ color: "rgba(255,255,255,0.8)" }} />
</IconButton>
</a>
</div>
</Tooltip>
: null}
{selectedOrganization.name.length > 0 ? (
@@ -2764,8 +2752,10 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
};
return (
<Zoom key={index}>
<GridItem data={griditem} />
<Zoom in={true} key={index}>
<div>
<GridItem data={griditem} />
</div>
</Zoom>
);
})}
@@ -3107,6 +3097,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
style={{}}
aria-label={"Copy APIkey"}
>
<div>
<IconButton
style={{}}
onClick={() => {
@@ -3143,6 +3134,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
style={{ color: "rgba(255,255,255,0.8)" }}
/>
</IconButton>
</div>
</Tooltip>
)
}
@@ -3715,17 +3707,19 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
title="Set in EVERY workflow"
placement="top"
>
<IconButton
style={{ marginRight: 10 }}
disabled={data.defined === false}
onClick={() => {
editAuthenticationConfig(data.id);
}}
>
<SelectAllIcon
color={data.defined ? "primary" : "secondary"}
/>
</IconButton>
<div>
<IconButton
style={{ marginRight: 10 }}
disabled={data.defined === false}
onClick={() => {
editAuthenticationConfig(data.id);
}}
>
<SelectAllIcon
color={data.defined ? "primary" : "secondary"}
/>
</IconButton>
</div>
</Tooltip>
) : (
<Tooltip
@@ -3733,6 +3727,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
title="Must edit before you can set in all workflows"
placement="top"
>
<div>
<IconButton
style={{ marginRight: 10 }}
onClick={() => {}}
@@ -3741,6 +3736,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
color={data.defined ? "primary" : "secondary"}
/>
</IconButton>
</div>
</Tooltip>
)}
<IconButton
@@ -3952,6 +3948,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
style={{}}
aria-label={"Copy orborus command"}
>
<div>
<IconButton
style={{}}
disabled={environment.Type === "cloud"}
@@ -3988,6 +3985,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
>
<FileCopyIcon disabled={environment.Type === "cloud"} style={{ color: environment.Type === "cloud" ? "rgba(255,255,255,0.2)" : "rgba(255,255,255,0.8)" }} />
</IconButton>
</div>
</Tooltip>
}
/>
frontend/src/views/AngularWorkflow.jsx
+11 -11
View File
@@ -51,7 +51,7 @@ import {
IconButton,
Menu,
Input,
Fade,
Collapse,
FormGroup,
FormControlLabel,
Typography,
@@ -119,14 +119,14 @@ import {
import * as cytoscape from "cytoscape";
import * as edgehandles from "cytoscape-edgehandles";
import * as clipboard from "cytoscape-clipboard";
//import * as clipboard from "cytoscape-clipboard";
//import undoRedo from "cytoscape-undo-redo";
//import cxtmenu from "cytoscape-cxtmenu";
import CytoscapeComponent from "react-cytoscapejs";
import undoRedo from "cytoscape-undo-redo";
import Draggable from "react-draggable";
import cytoscapestyle from "../defaultCytoscapeStyle.jsx";
import cxtmenu from "cytoscape-cxtmenu";
import { validateJson, GetIconInfo } from "./Workflows.jsx";
import { GetParsedPaths } from "./Apps.jsx";
@@ -232,9 +232,9 @@ const inputColor = "#383B40";
// http://apps.cytoscape.org/apps/yfileslayoutalgorithms
cytoscape.use(edgehandles);
cytoscape.use(clipboard);
cytoscape.use(undoRedo);
cytoscape.use(cxtmenu);
//cytoscape.use(clipboard);
//cytoscape.use(undoRedo);
//cytoscape.use(cxtmenu);
// Adds specific text to items
//import popper from 'cytoscape-popper';
@@ -12880,11 +12880,11 @@ const AngularWorkflow = (defaultprops) => {
{defaultReturn}
</SwipeableDrawer>
:
<Fade in={true} style={{ transitionDelay: `$0ms` }}>
<Collapse in={true} style={{ transitionDelay: `$0ms` }}>
<div id="rightside_actions" style={rightsidebarStyle}>
{defaultReturn}
</div>
</Fade>
</Collapse>
);
//return null;
@@ -14960,7 +14960,7 @@ const AngularWorkflow = (defaultprops) => {
</Typography>
</div>
) : (
<Fade in={true} timeout={1000} style={{ transitionDelay: `${150}ms` }}>
<Collapse in={true} timeout={1000} style={{ transitionDelay: `${150}ms` }}>
<CytoscapeComponent
elements={elements}
minZoom={0.35}
@@ -14983,7 +14983,7 @@ const AngularWorkflow = (defaultprops) => {
setCy(incy);
}}
/>
</Fade>
</Collapse>
)}
</div>
{executionModal}
frontend/src/views/Apps.jsx
+13 -13
View File
@@ -1893,27 +1893,27 @@ const Apps = (props) => {
filteredApps.length > 0 ? (
<div style={{ height: "75vh", overflowY: "auto" }}>
{filteredApps.map((app, index) => {
if (firstLoad) {
appDelay += 75
} else {
//return returnData
if (firstLoad) {
appDelay += 75
} else {
//return returnData
return <AppPaper app={app} />
}
}
return (
<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>
<span>
<AppPaper app={app} />
</span>
</Zoom>
)
<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>
<div>
<AppPaper app={app} />
</div>
</Zoom>
)
})}
{cursearch.length > 0
? null
: searchableApps.map((app, index) => {
return (
<AppPaper app={app} />
)
<AppPaper app={app} />
)
})}
</div>
) : (
frontend/src/views/Dashboard.jsx
+1 -1
View File
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import { useInterval } from "react-powerhooks";
import AppFramework from "../components/AppFramework.jsx";
import { makeStyles, useTheme } from "@mui/styles";
import { makeStyles, } from "@mui/styles";
// nodejs library that concatenates classes
import classNames from "classnames";
import theme from '../theme.jsx';
frontend/src/views/DashboardViews.jsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import { useInterval } from "react-powerhooks";
import { makeStyles, useTheme } from "@mui/styles";
import { makeStyles, } from "@mui/styles";
// nodejs library that concatenates classes
import classNames from "classnames";
import theme from '../theme.jsx';
frontend/src/views/SettingsPage.jsx
-192
View File
@@ -12,8 +12,6 @@ import {
} from "@mui/material";
import { useAlert } from "react-alert";
import detectEthereumProvider from "@metamask/detect-provider";
const Settings = (props) => {
const { globalUrl, isLoaded, userdata, setUserData } = props;
const alert = useAlert();
@@ -814,65 +812,6 @@ const Settings = (props) => {
) : null}
</div>
<div style={{ flex: 1, marginTop: 20 }}>
{/*userdata !== undefined &&
userdata.eth_info !== undefined &&
userdata.eth_info.account !== undefined &&
userdata.eth_info.account.length > 0 ? (
<div style={{ width: "100%", textAlign: "left" }}>
<Typography variant="body2">Network: TBD</Typography>
<Typography variant="body2">
Address: {userdata.eth_info.account}
</Typography>
{loadedWorkflowCollections.length > 0 ? (
<Typography variant="body2">
Collections:&nbsp;
{loadedWorkflowCollections.map((data, index) => {
var collectionname = data.toLowerCase();
collectionname = collectionname.replaceAll("#", "");
collectionname = collectionname.replaceAll(" ", "-");
return (
<span key={index}>
<a
rel="noopener noreferrer"
target="_blank"
href={`https://opensea.io/collection/${collectionname}`}
style={{ textDecoration: "none", color: "#f85a3e" }}
>
{data}
</a>
&nbsp;
</span>
);
})}
</Typography>
) : null}
<Button
style={{ height: 40, marginTop: 10 }}
variant="contained"
color="primary"
fullWidth={true}
onClick={() => {
//handleEthereumTokenCreation()
loadWorkflowOwnership();
}}
>
Validate ownership
</Button>
</div>
) : (
<Button
style={{ height: 40, marginTop: 10 }}
variant="outlined"
color="primary"
fullWidth={true}
onClick={() => {
handleEthereumConnection();
}}
>
Authenticate Metamask Wallet
</Button>
)*/}
</div>
</div>
@@ -986,137 +925,6 @@ const Settings = (props) => {
//saveWorkflow(workflow);
}
const handleEthereumTokenCreation = async () => {
const provider = await detectEthereumProvider();
if (!provider) {
console.log("Please install MetaMask!");
alert.error(
"Please download the MetaMask browser extension to authenticate fully!"
);
return;
}
if (!provider.isMetaMask) {
alert.error("Only MetaMask is supported as of now.");
return;
}
if (!provider.isConnected()) {
alert.error("Metamask is not connected.");
return;
}
console.log("Should make a token");
};
const handleEthereumConnection = async () => {
const provider = await detectEthereumProvider();
if (!provider) {
console.log("Please install MetaMask!");
alert.error(
"Please download the MetaMask browser extension to authenticate fully!"
);
return;
}
if (!provider.isMetaMask) {
alert.error("Only MetaMask is supported as of now.");
return;
}
// Find the ethereum network
// Get the users' account(s)
//alert.info("Connecting to MetaMask")
//console.log("Connected: ", provider.isConnected())
if (!provider.isConnected()) {
alert.error("Metamask is not connected.");
return;
}
provider.on("message", (event) => {
alert.info("Ethereum message: ", event);
});
/*
params: [
{
from: '0xb60e8dd61c5d32be8058bb8eb970870f07233155',
to: '0xd46e8dd67c5d32be8058bb8eb970870f07244567',
gas: '0x76c0', // 30400
gasPrice: '0x9184e72a000', // 10000000000000
value: '0x9184e72a', // 2441406250
data:
'0xd46e8dd67c5d32be8d46e8dd67c5d32be8058bb8eb970870f072445675058bb8eb970870f072445675',
},
]
*/
// https://docs.metamask.io/guide/rpc-api.html
// Gets accounts - requires previous permissions
//const method = "eth_accounts"
//const params = []
//
// Asks for permission, and gets the accounts
var method = "eth_requestAccounts";
var params = [];
provider
.request({
method: method,
params,
})
.then((result) => {
if (result !== undefined && result !== null && result.length > 0) {
userdata.eth_info.account = result[0];
// Getting and setting balance for the current user
method = "eth_getBalance";
params = [userdata.eth_info.account, "latest"];
provider
.request({
method: method,
params,
})
.then((result) => {
if (
result !== undefined &&
result !== null &&
result.length > 0
) {
userdata.eth_info.balance = result;
userdata.eth_info.parsed_balance = result / 1000000000000000000;
console.log(userdata.eth_info);
setUserData(userdata.eth_info);
// Updating
//if (userdata.eth_info !== userdata.userdata.eth_info) {
//}
setUser(userdata.id, "eth_info", userdata.eth_info);
userdata.userdata.eth_info = userdata.eth_info;
} else {
alert.error("Couldn't find balance: ", result);
}
// The result varies by RPC method.
// For example, this method will return a transaction hash hexadecimal string on success.
})
.catch((error) => {
// If the request fails, the Promise will reject with an error.
//setEthInfo(userdata.eth_info)
alert.error("Failed getting info from ethereum API: " + error);
});
} else {
alert.error("Couldn't find any user: ", result);
}
})
.catch((error) => {
// If the request fails, the Promise will reject with an error.
alert.error("Failed getting info from ethereum API: " + error);
});
// Gets the users' balance in WEI (one quintilionth ETH)
};
const loadedCheck =
isLoaded && !firstrequest ? (
<div style={bodyDivStyle}>{landingpageData}</div>
frontend/src/views/Welcome.jsx
+5 -5
View File
@@ -11,7 +11,7 @@ import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import {
Grid,
Container,
Fade,
Collapse,
Typography,
Paper,
Button,
@@ -417,7 +417,7 @@ const Welcome = (props) => {
<Typography variant="h6" style={{textAlign: "center", marginBottom: 25, }}>
App Framework
</Typography>
<Fade>
<Collapse>
<AppFramework
inputUsecase={inputUsecase}
frameworkData={frameworkData}
@@ -435,13 +435,13 @@ const Welcome = (props) => {
inputUsecases={usecases}
setInputUsecases={setUsecases}
/>
</Fade>
</Collapse>
</div>
}
</Grid>
</div>
:
<Fade in={true}>
<Collapse in={true}>
<div style={{maxWidth: 700, margin: "auto", marginTop: 50, }}>
{/*
<div style={{display:"flex"}}>
@@ -537,7 +537,7 @@ const Welcome = (props) => {
</Typography>
</div>
</div>
</Fade>
</Collapse>
}
</div>
)
frontend/src/views/Workflows.jsx
+11 -13
View File
@@ -8,7 +8,7 @@ import { Navigate } from "react-router-dom";
import SecurityFramework from '../components/SecurityFramework.jsx';
import EditWorkflow from "../components/EditWorkflow.jsx"
import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
//import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
import Priority from "../components/Priority.jsx";
import { isMobile } from "react-device-detect"
@@ -3459,10 +3459,11 @@ const Workflows = (props) => {
return returnData
}
/*<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>*/
return (
<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>
{returnData}
</Zoom>
<span>
{returnData}
</span>
);
})}
</div>
@@ -3499,13 +3500,11 @@ const Workflows = (props) => {
/>
: null}
{/*<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/}
<div style={{marginTop: 15, marginBottom: 50, }}>
{view === "grid" ? (
<Grid container spacing={filteredWorkflows.length === 0 ? 12 : filteredWorkflows.length === 1 ? 6 : 4} style={paperAppContainer}>
<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
<NewWorkflowPaper />
</Zoom>
<NewWorkflowPaper />
{filteredWorkflows.map((data, index) => {
// Shouldn't be a part of this list
if (data.public === true) {
@@ -3522,12 +3521,11 @@ const Workflows = (props) => {
)
}
/*<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/
return (
<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
<Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
<WorkflowPaper key={index} data={data} />
</Grid>
</Zoom>
<Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
<WorkflowPaper key={index} data={data} />
</Grid>
)
})}
</Grid>