Runs query at cursor in multiple query requests.

Closes #597.

angular.json

@@ -129,7 +129,8 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "styleext": "scss"
+      "styleext": "scss",
+      "inlineStyle": true
     },
     "@schematics/angular:directive": {
       "prefix": "app"

packages/altair-express-middleware/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/altair-static/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/altair-static/src/index.ts

@@ -2,13 +2,39 @@ import { readFileSync } from 'fs';
 import { resolve } from 'path';
 
 export interface RenderOptions {
+    /**
+     * URL to be used as a base for relative URLs
+     */
+    baseURL?: string;
+
+    /**
+     * URL to set as the server endpoint
+     */
     endpointURL?: string;
+
+    /**
+     * URL to set as the subscription endpoint
+     */
     subscriptionsEndpoint?: string;
+
+    /**
+     * Initial query to be added
+     */
     initialQuery?: string;
+
+    /**
+     * Initial variables to be added
+     */
     initialVariables?: string;
 }
 
-export const renderAltair = ({ endpointURL, subscriptionsEndpoint, initialQuery, initialVariables }: RenderOptions = {}) => {
+export const renderAltair = ({
+    baseURL,
+    endpointURL,
+    subscriptionsEndpoint,
+    initialQuery,
+    initialVariables
+}: RenderOptions = {}) => {
     const altairHtml = readFileSync(resolve(__dirname, 'dist/index.html'), 'utf8');
 
     let renderedOptions = '';

packages/gatsby-plugin-altair-graphql/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/app/actions/query/query.ts

@@ -1,4 +1,5 @@
 import { Action } from '@ngrx/store';
+import { QueryEditorState } from 'app/reducers/query/query';
 
 export const SET_URL = 'SET_URL';
 export const SET_URL_FROM_DB = 'SET_URL_FROM_DB';
@@ -38,6 +39,7 @@ export const HIDE_EDITOR_ALERT = 'HIDE_EDITOR_ALERT';
 export const SHOW_EDITOR_ALERT = 'SHOW_EDITOR_ALERT';
 
 export const SET_QUERY_OPERATIONS = 'SET_QUERY_OPERATIONS';
+export const SET_QUERY_EDITOR_STATE = 'SET_QUERY_EDITOR_STATE';
 
 
 export class SetUrlAction implements Action {
@@ -208,6 +210,12 @@ export class SetQueryOperationsAction implements Action {
   constructor(public windowId: string, public payload: { operations: any[] }) {}
 }
 
+export class SetQueryEditorStateAction implements Action {
+  readonly type = SET_QUERY_EDITOR_STATE;
+
+  constructor(public windowId: string, public payload: QueryEditorState) {}
+}
+
 export type Action =
   | SetUrlAction
   | SetUrlFromDbAction
@@ -237,4 +245,5 @@ export type Action =
   | ShowEditorAlertAction
   | SetHTTPMethodAction
   | SetQueryOperationsAction
+  | SetQueryEditorStateAction
   ;

src/app/components/query-editor/query-editor.component.ts

@@ -12,6 +12,7 @@ import {
 } from '@angular/core';
 
 import * as fromVariables from '../../reducers/variables/variables';
+import * as fromQuery from '../../reducers/query/query';
 
 // Import the codemirror packages
 import * as Codemirror from 'codemirror';
@@ -59,6 +60,7 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
   @Output() fileVariableNameChange = new EventEmitter();
   @Output() fileVariableDataChange = new EventEmitter();
   @Output() deleteFileVariableChange = new EventEmitter();
+  @Output() queryEditorStateChange = new EventEmitter<fromQuery.QueryEditorState>();
 
   @ViewChild('editor') editor;
 
@@ -119,6 +121,9 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
   ngAfterViewInit() {
     if (this.editor) {
       this.editor.codeMirror.on('keyup', (cm, event) => this.onKeyUp(cm, event));
+      this.editor.codeMirror.on('focus', (cm, event) => this.onEditorStateChange(cm, event));
+      this.editor.codeMirror.on('blur', (cm, event) => this.onEditorStateChange(cm, event));
+      this.editor.codeMirror.on('cursorActivity', (cm, event) => this.onEditorStateChange(cm, event));
     }
   }
 
@@ -156,6 +161,13 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
     }
   }
 
+  onEditorStateChange(cm, event) {
+    const cursor = cm.getCursor();
+    const cursorIndex = cm.indexFromPos(cursor);
+    const isFocused = cm.hasFocus();
+    this.queryEditorStateChange.next({ isFocused, cursorIndex });
+  }
+
   /**
    * Formats the query in the editor
    */

src/app/containers/window/window.component.html

@@ -39,6 +39,7 @@
           (fileVariableNameChange)="updateFileVariableName($event)"
           (fileVariableDataChange)="updateFileVariableData($event)"
           (deleteFileVariableChange)="deleteFileVariable($event)"
+          (queryEditorStateChange)="setQueryEditorState($event)"
           [query]="query"
           [gqlSchema]="gqlSchema"
           [tabSize]="tabSize$ | async"

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

@@ -13,6 +13,7 @@ import * as fromRoot from '../../reducers';
 import * as fromHeader from '../../reducers/headers/headers';
 import * as fromHistory from '../../reducers/history/history';
 import * as fromVariable from '../../reducers/variables/variables';
+import * as fromQuery from '../../reducers/query/query';
 
 import * as queryActions from '../../actions/query/query';
 import * as headerActions from '../../actions/headers/headers';
@@ -191,6 +192,10 @@ export class WindowComponent implements OnInit {
     this.sendRequest();
   }
 
+  setQueryEditorState(queryEditorState: fromQuery.QueryEditorState) {
+    this.store.dispatch(new queryActions.SetQueryEditorStateAction(this.windowId, queryEditorState));
+  }
+
   startSubscription() {
     this.store.dispatch(new queryActions.StartSubscriptionAction(this.windowId));
   }

src/app/effects/query.ts

@@ -46,6 +46,7 @@ export class QueryEffects {
             const url = this.environmentService.hydrate(response.data.query.url);
             const variables = this.environmentService.hydrate(response.data.variables.variables);
             const headers = this.environmentService.hydrateHeaders(response.data.headers);
+            let selectedOperation = response.data.query.selectedOperation;
 
             // If the query is empty, just return
             if (!query) {
@@ -90,9 +91,18 @@ export class QueryEffects {
             this.store.dispatch(new queryActions.SetQueryOperationsAction(response.windowId, { operations }));
 
             if (operations && operations.length > 1) {
+              const operationNameAtCursorIndex =
+                response.data.query.queryEditorState &&
+                response.data.query.queryEditorState.isFocused &&
+                this.gqlService.getOperationNameAtIndex(query, response.data.query.queryEditorState.cursorIndex);
+
+              console.log(operationNameAtCursorIndex, response.data.query.queryEditorState);
               if (
-                !response.data.query.selectedOperation ||
-                operations.map(def => def['name'] && def['name'].value).indexOf(response.data.query.selectedOperation) === -1) {
+                !(
+                  (selectedOperation && operations.map(def => def['name'] && def['name'].value).indexOf(selectedOperation) !== -1) ||
+                  (selectedOperation = operationNameAtCursorIndex)
+                )
+              ) {
                 // Ask the user to select operation
                 this.notifyService.warning(
                   `You have more than one query operations.
@@ -132,7 +142,7 @@ export class QueryEffects {
                 variables,
                 headers,
                 method: response.data.query.httpVerb,
-                selectedOperation: response.data.query.selectedOperation,
+                selectedOperation,
                 files: response.data.variables.files,
               })
               .pipe(

src/app/reducers/query/query.ts

@@ -6,6 +6,11 @@ import * as query from '../../actions/query/query';
 import config from '../../config';
 import { getFullUrl } from '../../utils';
 
+export interface QueryEditorState {
+  isFocused: boolean;
+  cursorIndex: number;
+}
+
 export interface State {
   url: string;
   subscriptionUrl: string;
@@ -27,6 +32,8 @@ export interface State {
   subscriptionConnectionParams: string;
   isSubscribed: boolean;
   subscriptionResponseList: Array<any>;
+
+  queryEditorState: QueryEditorState;
 }
 
 export const initialState: State = {
@@ -50,6 +57,10 @@ export const initialState: State = {
   subscriptionConnectionParams: '{}',
   isSubscribed: false,
   subscriptionResponseList: [],
+  queryEditorState: {
+    isFocused: false,
+    cursorIndex: null,
+  },
 };
 
 export function queryReducer(state = initialState, action: query.Action): State {
@@ -109,6 +120,8 @@ export function queryReducer(state = initialState, action: query.Action): State
       return Object.assign({}, state, { httpVerb: action.payload.httpVerb });
     case query.SET_QUERY_OPERATIONS:
       return Object.assign({}, state, { operations: action.payload.operations });
+    case query.SET_QUERY_EDITOR_STATE:
+      return { ...state, queryEditorState: action.payload };
     default:
       return state;
   }

src/app/services/gql/gql.service.ts

@@ -311,7 +311,7 @@ export class GqlService {
     }
   }
 
-  getOperations(query: string) {
+  getOperations(query: string): any[] {
     const parsedQuery = this.parseQuery(query);
 
     if (parsedQuery.definitions) {
@@ -330,6 +330,21 @@ export class GqlService {
     return [];
   }
 
+  getOperationAtIndex(query: string, index: number) {
+    return this.getOperations(query).find(operation => {
+      return operation.loc.start <= index && operation.loc.end >= index;
+    });
+  }
+
+  getOperationNameAtIndex(query: string, index: number): string {
+    const operation = this.getOperationAtIndex(query, index);
+
+    if (operation) {
+      return operation.name && operation.name.value;
+    }
+    return '';
+  }
+
   /**
    * Prettifies (formats) a given query
    * @param query

src/styles.scss

@@ -65,6 +65,9 @@
   --theme-off-border-color: #383942;
   --header-bg-color: var(--theme-off-bg-color);
 
+  --rgb-theme-bg: 40, 42, 54;
+  --rgb-theme-off-bg: 48, 50, 54;
+
   --editor-comment-color: #6272a4;
   --editor-string-color: #f1fa8c;
   --editor-number-color: #bd93f9;