This commit is contained in:
Frikky
2024-05-31 09:38:29 +02:00
parent e6ddb24875
commit 7a58953cc5
3 changed files with 87 additions and 34 deletions
+2
View File
@@ -514,6 +514,8 @@ const AuthenticationOauth2 = (props) => {
getAppAuthentication(true, true, true);
}
toast("Authentication successful!")
// This is more a guess than anything
// Should be handled in getAppAuthentication()
// in the parent component to make it accurate,
+1 -5
View File
@@ -8182,7 +8182,6 @@ const AngularWorkflow = (defaultprops) => {
borderRadius: theme.palette.borderRadius,
width: imagesize,
height: imagesize,
pointerEvents: "none",
// Stretch if necessary
objectFit: "cover",
// Center the object
@@ -14938,9 +14937,6 @@ const AngularWorkflow = (defaultprops) => {
top: isMobile ? 30 : appBarSize + 20,
}
const TopCytoscapeBar = (props) => {
if (workflow.public === true) {
return null
@@ -14956,6 +14952,7 @@ const AngularWorkflow = (defaultprops) => {
<div style={topBarStyle}>
<div style={{
margin: "0px 10px 0px 10px",
pointerevents: "none",
}}>
<Breadcrumbs
aria-label="breadcrumb"
@@ -14980,7 +14977,6 @@ const AngularWorkflow = (defaultprops) => {
</Link>
<h2 style={{
margin: 0,
pointerEvents: "none",
}}>{workflow.name}</h2>
</Breadcrumbs>
+84 -29
View File
@@ -10,6 +10,8 @@ import theme from '../theme.jsx';
//import { useAlert
import { ToastContainer, toast } from "react-toastify"
//import "./CollapsibleList.css"
import AuthenticationOauth2 from "../components/Oauth2Auth.jsx";
import AuthenticationWindow from "../components/AuthenticationWindow.jsx";
import { base64_decode, appCategories } from "../views/AppCreator.jsx";
@@ -128,6 +130,12 @@ const SetAuthentication = (props) => {
}
}, []);
const [expandedIndex, setExpandedIndex] = useState(null);
const handleToggle = (index) => {
setExpandedIndex(expandedIndex === index ? null : index);
};
// Handle:
// 1. Check for org_id, authentication, and app keys in queries
// 2. Load the app auth info from the orgs' apps
@@ -135,43 +143,90 @@ const SetAuthentication = (props) => {
// Make sure to test both private and public apps
const appname = app.name !== undefined ? app.name : "";
const appLink = "/apps/" + app.id || "";
console.log("App: ", app)
return (
<div style={{width: 1000, margin: "auto", marginTop: 50, }}>
{loadFail !== "" ?
loadFail
:
<div>
<Typography variant="h4" style={{marginBottom: 20,}}>
Configure {appname} Authentication
</Typography>
{app.authentication === undefined || app.authentication === null || app.authentication.length === 0 ?
null
:
app.authentication.type === "oauth2" || app.authentication.type === "oauth2-app" ?
<AuthenticationOauth2
selectedApp={app}
selectedAction={{
"app_name": app.name,
"app_id": app.id,
"app_version": app.version,
"large_image": app.large_image,
}}
authenticationType={app.authentication}
isCloud={true}
authButtonOnly={true}
getAppAuthentication={undefined}
/>
<><div>
<Typography variant="h4" style={{ marginBottom: 20, }}>
A Shuffle Organization has invited you to: Configure <a href={appLink} target="_blank" style={{ color: '#FF8444', textDecoration: 'none' }}>{appname}</a> Authentication
</Typography>
{/* What does this mean box */}
<Typography variant="h6" style={{ marginBottom: 20, }}>
What does this mean?
</Typography>
<Typography variant="body1" style={{ marginBottom: 20, }}>
A Shuffle Organization has invited you to configure authentication for this app so that they can use this authentication in one of their workflows.
</Typography>
<Typography variant="h6">
Authenticate Here:
</Typography>
<Typography variant="body1" style={{ marginBottom: 20, }}>
{app.authentication === undefined || app.authentication === null || app.authentication.length === 0 ?
null
:
<AuthenticationWindow
globalUrl={globalUrl}
selectedApp={app}
authFieldsOnly={true}
getAppAuthentication={undefined}
appAuthentication={appAuthentication}
/>
}
app.authentication.type === "oauth2" || app.authentication.type === "oauth2-app" ?
<AuthenticationOauth2
selectedApp={app}
selectedAction={{
"app_name": app.name,
"app_id": app.id,
"app_version": app.version,
"large_image": app.large_image,
}}
authenticationType={app.authentication}
isCloud={true}
authButtonOnly={true}
getAppAuthentication={undefined} />
:
<AuthenticationWindow
globalUrl={globalUrl}
selectedApp={app}
authFieldsOnly={true}
getAppAuthentication={undefined}
appAuthentication={appAuthentication} />}
</Typography>
<Typography variant="h6" style={{ marginBottom: 20, }}>
What can they do with this?
</Typography>
<Typography variant="body1" style={{ marginBottom: 20, }}>
You can check the actions they want to use <a href={appLink} target="_blank" style={{ color: '#FF8444', textDecoration: 'none' }}>here</a>.
</Typography>
<Typography variant="body1" style={{ marginBottom: 20, }}>
{/* Add a box below */}
<div className="collapsible-container">
<div className="collapsible-list">
{app.actions?.map((item, index) => (
<div key={index} className="collapsible-item">
<div className="collapsible-label" onClick={() => handleToggle(index)}>
{item.label}
</div>
{expandedIndex === index && (
<div className="collapsible-description">
{item.description}
</div>
)}
</div>
))}
</div>
</div>
</Typography>
</div>
<>
<div style={{ height: 100, }}></div>
</>
</>
}
</div>
)