Implemented electron touchbar functionality.

Created electron app service.
Added jshint config.

Known issues: Send request touchbar button doesn't have full support yet. Needs some code refactoring first.

.jshintrc

@@ -0,0 +1,92 @@
+{
+  // JSHint Default Configuration File (as on JSHint website)
+  // See http://jshint.com/docs/ for more details
+
+  "maxerr": 50, // {int} Maximum error before stopping
+  "module": true,
+
+  // Enforcing
+  "bitwise": true, // true: Prohibit bitwise operators (&, |, ^, etc.)
+  "camelcase": false, // true: Identifiers must be in camelCase
+  "curly": true, // true: Require {} for every new block or scope
+  "eqeqeq": true, // true: Require triple equals (===) for comparison
+  "forin": true, // true: Require filtering for..in loops with obj.hasOwnProperty()
+  "freeze": true, // true: prohibits overwriting prototypes of native objects such as Array, Date etc.
+  "immed": false, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
+  "latedef": false, // true: Require variables/functions to be defined before being used
+  "newcap": false, // true: Require capitalization of all constructor functions e.g. `new F()`
+  "noarg": true, // true: Prohibit use of `arguments.caller` and `arguments.callee`
+  "noempty": true, // true: Prohibit use of empty blocks
+  "nonbsp": true, // true: Prohibit "non-breaking whitespace" characters.
+  "nonew": false, // true: Prohibit use of constructors for side-effects (without assignment)
+  "plusplus": false, // true: Prohibit use of `++` and `--`
+  "quotmark": false, // Quotation mark consistency:
+  //   false    : do nothing (default)
+  //   true     : ensure whatever is used is consistent
+  //   "single" : require single quotes
+  //   "double" : require double quotes
+  "undef": true, // true: Require all non-global variables to be declared (prevents global leaks)
+  "unused": true, // Unused variables:
+  //   true     : all variables, last function parameter
+  //   "vars"   : all variables only
+  //   "strict" : all variables, all function parameters
+  "strict": true, // true: Requires all functions run in ES5 Strict Mode
+  "maxparams": false, // {int} Max number of formal params allowed per function
+  "maxdepth": false, // {int} Max depth of nested blocks (within functions)
+  "maxstatements": false, // {int} Max number statements per function
+  "maxcomplexity": false, // {int} Max cyclomatic complexity per function
+  "maxlen": false, // {int} Max number of characters per line
+  "varstmt": false, // true: Disallow any var statements. Only `let` and `const` are allowed.
+
+  // Relaxing
+  "asi": false, // true: Tolerate Automatic Semicolon Insertion (no semicolons)
+  "boss": false, // true: Tolerate assignments where comparisons would be expected
+  "debug": false, // true: Allow debugger statements e.g. browser breakpoints.
+  "eqnull": false, // true: Tolerate use of `== null`
+  "esversion": 6, // {int} Specify the ECMAScript version to which the code must adhere.
+  "moz": false, // true: Allow Mozilla specific syntax (extends and overrides esnext features)
+  // (ex: `for each`, multiple try/catch, function expression…)
+  "evil": false, // true: Tolerate use of `eval` and `new Function()`
+  "expr": false, // true: Tolerate `ExpressionStatement` as Programs
+  "funcscope": false, // true: Tolerate defining variables inside control statements
+  "globalstrict": false, // true: Allow global "use strict" (also enables 'strict')
+  "iterator": false, // true: Tolerate using the `__iterator__` property
+  "lastsemic": false, // true: Tolerate omitting a semicolon for the last statement of a 1-line block
+  "laxbreak": false, // true: Tolerate possibly unsafe line breakings
+  "laxcomma": true, // true: Tolerate comma-first style coding
+  "loopfunc": false, // true: Tolerate functions being defined in loops
+  "multistr": false, // true: Tolerate multi-line strings
+  "noyield": false, // true: Tolerate generator functions with no yield statement in them.
+  "notypeof": false, // true: Tolerate invalid typeof operator values
+  "proto": false, // true: Tolerate using the `__proto__` property
+  "scripturl": false, // true: Tolerate script-targeted URLs
+  "shadow": false, // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
+  "sub": false, // true: Tolerate using `[]` notation when it can still be expressed in dot notation
+  "supernew": false, // true: Tolerate `new function () { ... };` and `new Object;`
+  "validthis": false, // true: Tolerate using this in a non-constructor function
+
+  // Environments
+  "browser": true, // Web Browser (window, document, etc)
+  "browserify": false, // Browserify (node.js code in the browser)
+  "couch": false, // CouchDB
+  "devel": true, // Development/debugging (alert, confirm, etc)
+  "dojo": false, // Dojo Toolkit
+  "jasmine": false, // Jasmine
+  "jquery": false, // jQuery
+  "mocha": true, // Mocha
+  "mootools": false, // MooTools
+  "node": true, // Node.js
+  "nonstandard": false, // Widely adopted globals (escape, unescape, etc)
+  "phantom": false, // PhantomJS
+  "prototypejs": false, // Prototype and Scriptaculous
+  "qunit": false, // QUnit
+  "rhino": false, // Rhino
+  "shelljs": false, // ShellJS
+  "typed": false, // Globals for typed array constructions
+  "worker": false, // Web Workers
+  "wsh": false, // Windows Scripting Host
+  "yui": false, // Yahoo User Interface
+
+  // Custom Globals
+  "globals": {} // additional predefined global variables
+}

electron/touchbar.js

@@ -1,22 +1,51 @@
 const { TouchBar } = require('electron');
 
-const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar
-
-// Spin button
-const spin = new TouchBarButton({
-  label: 'Would you like touchbar support in Altair?',
-  // backgroundColor: '#7851A9',
-  click: () => {
-    console.log('Button clicked.');
-    const issueUrl = 'https://github.com/imolorhe/altair/issues/180';
-    require('electron').shell.openExternal(issueUrl);
-  }
-});
-
-const touchBar = new TouchBar([
-  spin
-]);
+const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar;
+
+const createTouchBar = actions => {
+
+  // Spin button
+  const spin = new TouchBarButton({
+    label: 'Would you like touchbar support in Altair?',
+    // backgroundColor: '#7851A9',
+    click: () => {
+      console.log('Button clicked.');
+      const issueUrl = 'https://github.com/imolorhe/altair/issues/180';
+      require('electron').shell.openExternal(issueUrl);
+    }
+  });
+
+  const sendRequestButton = new TouchBarButton({
+    label: 'Send Request',
+    backgroundColor: '#7EBC59',
+    click: actions.sendRequest,
+  });
+
+  const reloadDocsButton = new TouchBarButton({
+    label: 'Reload Docs',
+    click: actions.reloadDocs,
+  });
+
+  const showDocsButton = new TouchBarButton({
+    label: 'Show Docs',
+    click: actions.showDocs
+  });
+
+  const spacer = new TouchBarSpacer({
+    size: 'flexible'
+  });
+
+  const touchBar = new TouchBar([
+    // spin,
+    sendRequestButton,
+    spacer,
+    reloadDocsButton,
+    showDocsButton,
+  ]);
+
+  return touchBar;
+};
 
 module.exports = {
-  touchBar
+  createTouchBar,
 };

electron/window.js

@@ -5,7 +5,7 @@ const fs = require('fs');
 const mime = require('mime-types');
 
 const { createMenu } = require('./menu');
-const { touchBar } = require('./touchbar');
+const { createTouchBar } = require('./touchbar');
 
 let instance = null;
 
@@ -17,7 +17,16 @@ const actions = {
   closeTab: () => {
     console.log('Close tab.');
     instance.webContents.send('close-tab', true);
-  }
+  },
+  sendRequest: () => {
+    instance.webContents.send('send-request', true);
+  },
+  reloadDocs: () => {
+    instance.webContents.send('reload-docs', true);
+  },
+  showDocs: () => {
+    instance.webContents.send('show-docs', true);
+  },
 };
 
 const createWindow = () => {
@@ -78,7 +87,7 @@ const createWindow = () => {
   // instance.webContents.openDevTools();
 
   // Set the touchbar
-  instance.setTouchBar(touchBar);
+  instance.setTouchBar(createTouchBar(actions));
 
   // Prevent the app from navigating away from the app
   instance.webContents.on('will-navigate', (e, url) => e.preventDefault());

src/app/app.module.ts

@@ -57,6 +57,7 @@ const providers = [
     services.WindowService,
     services.NotifyService,
     services.DonationService,
+    services.ElectronAppService,
     { provide: ToastOptions, useClass: CustomOption },
     reducerProvider
 ];

src/app/containers/app/app.component.ts

@@ -2,9 +2,6 @@ import { Component, ViewChild } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import { TranslateService } from '@ngx-translate/core';
-import { ElectronService } from 'ngx-electron';
-
-import isElectron from '../../utils/is_electron';
 
 import * as fromRoot from '../../reducers';
 import * as fromHeader from '../../reducers/headers/headers';
@@ -22,9 +19,10 @@ import * as windowsMetaActions from '../../actions/windows-meta/windows-meta';
 import * as settingsActions from '../../actions/settings/settings';
 import * as donationActions from '../../actions/donation';
 
-import { QueryService, GqlService, WindowService, DonationService } from '../../services';
+import { QueryService, GqlService, WindowService, DonationService, ElectronAppService } from '../../services';
 
 import config from '../../config';
+import isElectron from '../../utils/is_electron';
 
 @Component({
   selector: 'app-root',
@@ -47,8 +45,8 @@ export class AppComponent {
     private windowService: WindowService,
     private store: Store<fromRoot.State>,
     private translate: TranslateService,
-    private electron: ElectronService,
-    private donationService: DonationService
+    private donationService: DonationService,
+    private electronApp: ElectronAppService,
   ) {
     this.settings$ = this.store.select('settings').distinctUntilChanged();
 
@@ -70,16 +68,7 @@ export class AppComponent {
         this.translate.use(language);
       });
 
-    if (this.electron.isElectronApp) {
-      this.electron.ipcRenderer.on('create-tab', () => {
-        this.newWindow();
-      });
-      this.electron.ipcRenderer.on('close-tab', () => {
-        if (this.windowIds.length > 1) {
-          this.removeWindow(this.activeWindowId);
-        }
-      });
-    }
+    this.electronApp.connect();
 
     this.windowIds$ = this.store.select('windows').map(windows => {
       return Object.keys(windows);

src/app/containers/window/window.component.ts

@@ -153,6 +153,7 @@ export class WindowComponent implements OnInit {
     this.store.dispatch(new queryActions.SetHTTPMethodAction({ httpVerb }, this.windowId));
   }
 
+  // TODO: Move logic into effect
   sendRequest() {
     // Store the current query into the history if it does not already exist in the history
     if (!this.historyList.filter(item => item.query.trim() === this.query.trim()).length) {
@@ -257,7 +258,6 @@ export class WindowComponent implements OnInit {
   addQueryToEditor(queryData: { query: String, meta: any }) {
     // Add the query to what is already in the editor
     this.store.dispatch(new queryActions.SetQueryAction(`${this.query}\n${queryData.query}`, this.windowId));
-    this.store.dispatch(new layoutActions.NotifyExperimentalAction(this.windowId));
 
     // If the query has args
     if (queryData.meta.hasArgs) {

src/app/services/electron-app/electron-app.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ElectronAppService } from './electron-app.service';
+
+describe('ElectronAppService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ElectronAppService]
+    });
+  });
+
+  it('should be created', inject([ElectronAppService], (service: ElectronAppService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/services/electron-app/electron-app.service.ts

@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+import { ElectronService } from 'ngx-electron';
+import { Store } from '@ngrx/store';
+
+import { WindowService } from '..';
+
+import * as fromRoot from '../../reducers';
+
+import * as queryActions from '../../actions/query/query';
+import * as docsActions from '../../actions/docs/docs';
+
+@Injectable()
+export class ElectronAppService {
+
+  windowIds;
+  activeWindowId = '';
+
+  constructor(
+    private electron: ElectronService,
+    private store: Store<fromRoot.State>,
+    private windowService: WindowService,
+  ) {
+    this.store.subscribe(data => {
+      this.windowIds = Object.keys(data.windows);
+      this.activeWindowId = data.windowsMeta.activeWindowId;
+    })
+  }
+
+  connect() {
+    if (this.electron.isElectronApp) {
+      this.electron.ipcRenderer.on('create-tab', () => {
+        this.windowService.newWindow().first().subscribe();
+      });
+      this.electron.ipcRenderer.on('close-tab', () => {
+        if (this.windowIds.length > 1) {
+          this.windowService.removeWindow(this.activeWindowId);
+        }
+      });
+
+      this.electron.ipcRenderer.on('send-request', () => {
+        this.store.dispatch(new queryActions.SendQueryRequestAction(this.activeWindowId));
+      });
+      this.electron.ipcRenderer.on('reload-docs', () => {
+        this.store.dispatch(new queryActions.SendIntrospectionQueryRequestAction(this.activeWindowId));
+      });
+      this.electron.ipcRenderer.on('show-docs', () => {
+        this.store.dispatch(new docsActions.ToggleDocsViewAction(this.activeWindowId));
+      });
+
+      console.log('Electron app connected.');
+    }
+  }
+}

src/app/services/index.ts

@@ -4,4 +4,5 @@ export { DbService } from './db.service';
 export { QueryService } from './query.service';
 export { WindowService } from './window.service';
 export { NotifyService } from './notify/notify.service';
-export {  DonationService} from './donation.service';
+export { DonationService } from './donation.service';
+export { ElectronAppService } from './electron-app/electron-app.service';