Make connection tab title configurable

6 files changed, 28 insertions, 10 deletions

diff --git a/index.html b/index.html
index 4f0d500..2d8dbee 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
         <button id="new-connection">New connection</button>
       </div>
     </div>
+    <div class="etabs-tabgroup-footer"></div>
     <div class="etabs-views"></div>
 
     <script>
diff --git a/instance-manager.js b/instance-manager.js
index 6a4d019..7d27a7e 100644
--- a/instance-manager.js
+++ b/instance-manager.js
@@ -10,9 +10,9 @@ function createNewConnection() {
   ipcRenderer.send("instanceManager.openNewConnectionDialog");
 }
 
-function registerNewInstance(assignedQueryExecutorId) {
+function registerNewInstance(payload) {
   tabGroup.addTab({
-    title: "Electron",
+    title: payload.connectionName,
     src: "file://" + __dirname + "/editor-instance.html",
     visible: true,
     active: true,
@@ -21,15 +21,15 @@ function registerNewInstance(assignedQueryExecutorId) {
       let webview = tab.webview;
       if (!!webview) {
         webview.addEventListener("dom-ready", () => {
-          webview.send("editorInstance.registerQueryExecutor", assignedQueryExecutorId);
+          webview.send("editorInstance.registerQueryExecutor", payload.assignedQueryExecutorId);
         })
       }
     }
   });
 }
 
-ipcRenderer.on("instanceManager.registerNewInstance", (event, assignedQueryExecutorId) => {
-  registerNewInstance(assignedQueryExecutorId);
+ipcRenderer.on("instanceManager.registerNewInstance", (event, payload) => {
+  registerNewInstance(payload);
 });
 
 
diff --git a/main.js b/main.js
index 2639034..493d066 100644
--- a/main.js
+++ b/main.js
@@ -43,7 +43,7 @@ app.on("activate", () => {
 function createNewConnectionDialog() {
   newConnectionDialog = new BrowserWindow({
     width: 400,
-    height: 470
+    height: 540
   });
   newConnectionDialog.loadURL(url.format({
     pathname: path.join(__dirname, "new-connection.html"),
@@ -83,10 +83,14 @@ ipcMain.on("newConnection.createConnection", (event, payload) => {
 });
 
 
-ipcMain.on("queryExecutor.initialiseConnectionCallback", (event, payload) => {
+ipcMain.on("queryExecutor.initialiseConnectionCallback", (event, executorId) => {
   // TODO - handle connection initialisation errors
   
-  uiWindow.webContents.send("instanceManager.registerNewInstance", payload);
+  // Bit of a hack, cant guarantee this was the executor which just got initalised.executor
+  // Should pass it back from the executor via the payload
+  let connectionName = queryExecutors[queryExecutors.length -1].connectionConfig.name;
+
+  uiWindow.webContents.send("instanceManager.registerNewInstance", {assignedQueryExecutorId: executorId, connectionName: connectionName});
   newConnectionDialog.close();
 });
 
diff --git a/new-connection.html b/new-connection.html
index 18d4ad9..1ac6c89 100644
--- a/new-connection.html
+++ b/new-connection.html
@@ -11,6 +11,13 @@
     <h4 class="title is-4" >Add new connection</h4>
     <form>
       <div class="field">
+        <label class="label is-small" for="name">Connection name</label>
+        <div class="control">
+          <input name="name" class="input is-small" type="text"/>
+        </div>
+        <p class="help">This is shown as the title of the connection tab</p>
+      </div>
+      <div class="field">
         <label class="label is-small" for="vendor">Vendor</label>
         <div class="control">
             <div class="select is-small">
diff --git a/styles/editor-instance.css b/styles/editor-instance.css
index 99ac763..7ae5727 100644
--- a/styles/editor-instance.css
+++ b/styles/editor-instance.css
@@ -32,8 +32,7 @@ body {
 
 .flex-wrapper .row.header {
   flex: 0 1 auto;
-  /* background-color: #474A5E; */
-  background: #6D8A88;
+  background-color: #474A5E;
   color: white;
 }
 
diff --git a/styles/instance-manager.css b/styles/instance-manager.css
index 8449b9c..c49c8a3 100644
--- a/styles/instance-manager.css
+++ b/styles/instance-manager.css
@@ -11,6 +11,7 @@ body {
   background: none;
   background-color: #474A5E;
   border: none;
+  font-weight: bold;
 }
 
 .etabs-tab.active {
@@ -19,10 +20,16 @@ body {
 
 .etabs-views {
   border: none;
+  height: calc(100vh - 52px);
 }
 
 .etabs-buttons button {
   width: inherit;
   padding: 4px 6px;
   background: #6D8A88;
+}
+
+.etabs-tabgroup-footer {
+  background: #6D8A88;
+  height: 20px;
 }
\ No newline at end of file