added IDAContext and hardcoded available JHub services in the frontend

src/App.js

@@ -3,6 +3,7 @@ import "./App.css";
 import Routes from "./routes/Routes";
 import { GlobalContextProvider } from "./contexts/GlobalContext";
 import { QueryContextProvider } from "./contexts/QueryContext";
+import { IDAContextProvider } from "./contexts/IDAContext";
 
 // This is the App, only application global stuff goes here, like the global state provider.
 
@@ -11,7 +12,9 @@ export default function App() {
     <div>
       <GlobalContextProvider>
         <QueryContextProvider>
-          <Routes />
+          <IDAContextProvider>
+            <Routes />
+          </IDAContextProvider>
         </QueryContextProvider>
       </GlobalContextProvider>
     </div>

src/components/Interactive.js

-import React from "react";
-import { Alert } from "react-bootstrap";
+import React, { useContext } from "react";
+import { Button, Form, Container } from "react-bootstrap";
+import { IDAContext } from "../contexts/IDAContext";
+import { useHistory } from "react-router-dom";
 
 export default function Interactive() {
+  const { jhubURL, setJhubURL } = useContext(IDAContext);
+
+  let list_of_jhubs = [
+    {"name" : "SKAO JupyterHub", "url" : "https://srcdev.skatelescope.org/escape"},
+    {"name" : "ASTRON JupyterHub", "url" : "https://sdc.astron.nl/hub/"},
+    {"name" : "IFAE-PIC JupyterHub", "url" : "https://jupyter.pic.es" },]
+
+  
   return (
-    // <div class="embed-responsive embed-responsive-16by9">
-    //   <iframe
-    //     class="embed-responsive-item"
-    //     src="http://130.246.212.44/escape/"
-    //     allowfullscreen
-    //   ></iframe>
-    // </div>
-    <Alert variant="warning">
-      <p>You will leave ESAP GUI and be redirected to</p>
-      <a
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://srcdev.skatelescope.org/escape"
-      >
-        Interactive analysis platform hosted by SKAO
-      </a>
-    </Alert>
+    <Container fluid>
+    <Form className="mt-3">
+      <Form.Group controlId="jhub" onChange={
+        (event) => setJhubURL(list_of_jhubs.find((item) => item.name === event.target.value).url)
+        }>
+        <Form.Label>Select JupyterHub Services</Form.Label>
+        <Form.Control className="mt-3" as="select">
+          {list_of_jhubs.map((option) => <option>{option.name}</option>)}
+        </Form.Control>
+      </Form.Group>
+      <Button href={jhubURL} target="_blank">Launch</Button>
+    </Form>
+  </Container>
   );
 }

src/contexts/IDAContext.js

+import React, { useState, createContext } from 'react';
+
+export const IDAContext = createContext();
+export function IDAContextProvider({ children }) {
+    const [jhubURL, setJhubURL] = useState("https://srcdev.skatelescope.org/escape");
+    return (
+        <IDAContext.Provider
+            value={{
+                jhubURL,
+                setJhubURL,
+            }}
+        >
+        {children}
+        </IDAContext.Provider>
+    )
+}
\ No newline at end of file

src/routes/Routes.js

@@ -11,11 +11,15 @@ import { QueryContext } from "../contexts/QueryContext";
 import Rucio from "../components/Rucio";
 import Interactive from "../components/Interactive";
 import { IVOAContextProvider } from "../contexts/IVOAContext";
+import { IDAContext } from "../contexts/IDAContext";
 
 export default function Routes() {
   const { handleLogin, handleLogout, handleError } = useContext(GlobalContext);
   const { config } = useContext(QueryContext);
+  const { jhubURL } = useContext(IDAContext);
   if (!config) return null;
+  if (!jhubURL) return null;
+  console.log(jhubURL);
 
   return (
     <Router basename={config.frontend_basename}>
@@ -30,6 +34,7 @@ export default function Routes() {
         <Route exact path="/interactive">
           <Interactive />
         </Route>
+        <Route exact path="/jhub" render={() => (window.location = {jhubURL})} />
         <Route exact path="/login" component={handleLogin} />
         <Route exact path="/logout" component={handleLogout} />
         <Route exact path="/error" component={handleError} />