Merge

frontend/src/components/Oauth2Auth.jsx

@@ -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,

frontend/src/views/AngularWorkflow.jsx

@@ -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>
 

frontend/src/views/UpdateAuthentication.jsx

@@ -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>
+				<><div>
-					<Typography variant="h4" style={{marginBottom: 20,}}>
+					<Typography variant="h4" style={{ marginBottom: 20, }}>
-						Configure {appname} Authentication
+						A Shuffle Organization has invited you to: Configure <a href={appLink} target="_blank" style={{ color: '#FF8444', textDecoration: 'none' }}>{appname}</a> Authentication
-					</Typography> 
+					</Typography>
-					{app.authentication === undefined || app.authentication === null || app.authentication.length === 0 ?
+
-						null 
+					{/* What does this mean box */}
-						:
+					<Typography variant="h6" style={{ marginBottom: 20, }}>
-						app.authentication.type === "oauth2" || app.authentication.type === "oauth2-app" ?
+						What does this mean?
-							<AuthenticationOauth2
+					</Typography>
-								selectedApp={app}
+					<Typography variant="body1" style={{ marginBottom: 20, }}>
-								selectedAction={{
+						A Shuffle Organization has invited you to configure authentication for this app so that they can use this authentication in one of their workflows.
-									"app_name": app.name,
+					</Typography>
-									"app_id": app.id,
+
-									"app_version": app.version,
+					<Typography variant="h6">
-									"large_image": app.large_image,
+						Authenticate Here:
-								}}
+					</Typography>
-								authenticationType={app.authentication}
+
-								isCloud={true}
+					<Typography variant="body1" style={{ marginBottom: 20, }}>
-								authButtonOnly={true}
+						{app.authentication === undefined || app.authentication === null || app.authentication.length === 0 ?
-								getAppAuthentication={undefined}
+							null
-							/>
 							:
-							<AuthenticationWindow
+							app.authentication.type === "oauth2" || app.authentication.type === "oauth2-app" ?
-								globalUrl={globalUrl}
+								<AuthenticationOauth2
-								selectedApp={app}
+									selectedApp={app}
-								authFieldsOnly={true}
+									selectedAction={{
-								getAppAuthentication={undefined}
+										"app_name": app.name,
-								appAuthentication={appAuthentication}
+										"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>
 	)