Kelp GUI: explicit quit button inside the Kelp GUI window, closes #357

cmd/server_amd64.go

@@ -195,7 +195,7 @@ func init() {
 			}
 		}
 
-		s, e := backend.MakeAPIServer(kos, *options.horizonTestnetURI, apiTestNet, *options.horizonPubnetURI, apiPubNet, *rootCcxtRestURL, *options.noHeaders)
+		s, e := backend.MakeAPIServer(kos, *options.horizonTestnetURI, apiTestNet, *options.horizonPubnetURI, apiPubNet, *rootCcxtRestURL, *options.noHeaders, quit)
 		if e != nil {
 			panic(e)
 		}

gui/backend/api_server.go

@@ -26,6 +26,7 @@ type APIServer struct {
 	apiTestNet        *horizonclient.Client
 	apiPubNet         *horizonclient.Client
 	noHeaders         bool
+	quitFn            func()
 
 	cachedOptionsMetadata metadata
 }
@@ -39,6 +40,7 @@ func MakeAPIServer(
 	apiPubNet *horizonclient.Client,
 	ccxtRestUrl string,
 	noHeaders bool,
+	quitFn func(),
 ) (*APIServer, error) {
 	binPath, e := filepath.Abs(os.Args[0])
 	if e != nil {
@@ -67,6 +69,7 @@ func MakeAPIServer(
 		apiPubNet:             apiPubNet,
 		noHeaders:             noHeaders,
 		cachedOptionsMetadata: optionsMetadata,
+		quitFn:                quitFn,
 	}, nil
 }
 

gui/backend/quit.go

@@ -0,0 +1,15 @@
+package backend
+
+import (
+	"net/http"
+	"time"
+)
+
+func (s *APIServer) quit(w http.ResponseWriter, r *http.Request) {
+	go func() {
+		// sleep so we can respond to the request
+		time.Sleep(1 * time.Second)
+		s.quitFn()
+	}()
+	w.WriteHeader(http.StatusOK)
+}

gui/backend/routes.go

@@ -10,6 +10,7 @@ import (
 func SetRoutes(r *chi.Mux, s *APIServer) {
 	r.Route("/api/v1", func(r chi.Router) {
 		r.Get("/version", http.HandlerFunc(s.version))
+		r.Get("/quit", http.HandlerFunc(s.quit))
 		r.Get("/listBots", http.HandlerFunc(s.listBots))
 		r.Get("/autogenerate", http.HandlerFunc(s.autogenerateBot))
 		r.Get("/genBotName", http.HandlerFunc(s.generateBotName))

gui/web/src/App.js

@@ -2,14 +2,15 @@ import React, { Component } from 'react';
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import styles from './App.module.scss';
 import Header from './components/molecules/Header/Header';
+import Button from './components/atoms/Button/Button';
 import Bots from './components/screens/Bots/Bots';
 import NewBot from './components/screens/NewBot/NewBot';
+import version from './kelp-ops-api/version';
+import quit from './kelp-ops-api/quit';
 // import Welcome from './components/molecules/Welcome/Welcome';
 // import Modal from './components/molecules/Modal/Modal';
 
-import version from './kelp-ops-api/version';
-
-let baseUrl = function() {
+let baseUrl = function () {
   let origin = window.location.origin
   if (process.env.REACT_APP_API_PORT) {
     let parts = origin.split(":")
@@ -26,6 +27,7 @@ class App extends Component {
     };
 
     this.setVersion = this.setVersion.bind(this);
+    this.quit = this.quit.bind(this);
     this._asyncRequests = {};
   }
 
@@ -43,21 +45,45 @@ class App extends Component {
 
       delete _this._asyncRequests["version"];
       if (!resp.includes("error")) {
-        _this.setState({version: resp});
+        _this.setState({ version: resp });
       } else {
         setTimeout(_this.setVersion, 30000);
       }
     });
   }
 
+  quit() {
+    var _this = this
+    this._asyncRequests["quit"] = quit(baseUrl).then(resp => {
+      if (!_this._asyncRequests["quit"]) {
+        // if it has been deleted it means we don't want to process the result
+        return
+      }
+      delete _this._asyncRequests["quit"];
+
+      if (resp.status === 200) {
+        window.close();
+      }
+    });
+  }
+
   componentWillUnmount() {
     if (this._asyncRequests["version"]) {
       delete this._asyncRequests["version"];
     }
   }
 
   render() {
-    let banner = (<div className={styles.banner}>Kelp UI is only available on the Stellar Test Network</div>);
+    let banner = (<div className={styles.banner}>
+      <Button
+        className={styles.quit}
+        size="small"
+        onClick={this.quit}
+      >
+        Quit
+      </Button>
+      Kelp UI is only available on the Stellar Test Network
+    </div>);
 
     return (
       <div>

gui/web/src/App.module.scss

@@ -6,4 +6,12 @@
     text-align: center;
     vertical-align: middle;
     color: $color-contrast-2;
+}
+
+.quit {
+    height: 8px;
+    background-color: $color-primary;
+    vertical-align: middle;
+    color: $color-danger;
+    float: left;
 }

gui/web/src/kelp-ops-api/quit.js

@@ -0,0 +1,3 @@
+export default (baseUrl) => {
+    return fetch(baseUrl + "/api/v1/quit");
+};