Merge
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user