Merge pull request #781 from imolorhe/staging

Staging

chrome-ext-files/manifest.json

@@ -3,7 +3,7 @@
   "name": "Altair GraphQL Client",
   "short_name": "Altair",
   "description": "The only graphQL client you'll ever need.",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "icons": {
     "16": "assets/img/altair_logo_128.png",
     "48": "assets/img/altair_logo_128.png",

docs/docs/features/multiple-languages.md

@@ -5,7 +5,7 @@ parent: Features
 ## Multiple Languages
 
 You can use Altair comfortably in your native language with several languages
-(including English, Chinese, French, Spanish, Russian, German, Brazilian, Romanian among others) supported.
+(including English, Chinese, French, Spanish, Russian, German, Brazilian, Vietnamese, Romanian among others) supported.
 You can also contribute and add support for your language by clicking [here.](https://altair-gql-translate.surge.sh/)
 
 Available languages can be found [here](https://crowdin.com/project/altair-gql).

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "2.1.8",
+  "version": "2.1.9",
   "registry": "https://registry.npmjs.org/",
   "npmClient": "yarn"
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "altair",
   "productName": "Altair GraphQL Client",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "license": "MIT",
   "author": "Samuel Imolorhe <samuelimolo4real@gmail.com> (https://sirmuel.design/)",
   "description": "The best graphQL client you will ever need",
@@ -118,7 +118,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.10.0",
-    "@types/chrome": "^0.0.83",
+    "@types/chrome": "^0.0.86",
     "@types/electron": "^1.4.38",
     "@types/graphql": "^14.2.0",
     "@types/jasmine": "3.3.12",
@@ -135,7 +135,7 @@
     "electron-builder": "^20.27.1",
     "electron-chromedriver": "^5.0.0-beta.1",
     "electron-prebuilt-compile": "^4.0.0",
-    "electron-reloader": "^0.2.0",
+    "electron-reloader": "^0.3.0",
     "jasmine-core": "^3.1.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "^4.0.1",
@@ -154,7 +154,7 @@
     "ts-node": "^8.0.3",
     "tslint": "^5.9.1",
     "typescript": ">=3.1.1 <3.2",
-    "typescript-json-schema": "^0.37.0",
+    "typescript-json-schema": "^0.38.0",
     "web-ext": "^3.0.0"
   },
   "config": {

packages/altair-express-middleware/package.json

@@ -1,6 +1,6 @@
 {
   "name": "altair-express-middleware",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "description": "Express middleware for altair graphql client",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
@@ -30,7 +30,7 @@
   },
   "homepage": "https://github.com/imolorhe/altair#readme",
   "dependencies": {
-    "altair-static": "^2.1.8",
+    "altair-static": "^2.1.9",
     "express": "^4.16.2"
   },
   "devDependencies": {

packages/altair-koa-middleware/package.json

@@ -1,6 +1,6 @@
 {
   "name": "altair-koa-middleware",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "description": "Koa middleware for altair graphql client",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
@@ -30,7 +30,7 @@
   },
   "homepage": "https://github.com/imolorhe/altair#readme",
   "dependencies": {
-    "altair-static": "^2.1.8",
+    "altair-static": "^2.1.9",
     "koa-router": "^7.4.0",
     "koa-send": "^5.0.0"
   },

packages/altair-static/package.json

@@ -1,6 +1,6 @@
 {
   "name": "altair-static",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "description": "Static package for altair graphql client",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",

packages/gatsby-plugin-altair-graphql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-altair-graphql",
-  "version": "2.1.8",
+  "version": "2.1.9",
   "description": "A gatsby plugin for using Altair GraphQL client",
   "main": "gatsby-node.js",
   "scripts": {
@@ -28,6 +28,6 @@
     "typescript": "^3.3.1"
   },
   "dependencies": {
-    "altair-express-middleware": "^2.1.8"
+    "altair-express-middleware": "^2.1.9"
   }
 }

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

@@ -95,7 +95,7 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
       'Ctrl-F': 'findPersistent',
 
       // show current token parent type in docs
-      'Ctrl-D': cm => this.onShowInDocsByToken(cm),
+      'Ctrl-D': cm => this.zone.run(() => this.onShowInDocsByToken(cm)),
 
       'Shift-Ctrl-Enter': cm => this.zone.run(() => this.onFillFields(cm)),
     },
@@ -117,10 +117,10 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
       }
     },
     info: {
-      onClick: reference => this.onShowInDocsByReference(reference),
+      onClick: reference => this.zone.run(() => this.onShowInDocsByReference(reference)),
     },
     jump: {
-      onClick: reference => this.onShowInDocsByReference(reference),
+      onClick: reference => this.zone.run(() => this.onShowInDocsByReference(reference)),
     }
   };
 

src/app/components/url-box/url-box.component.html

@@ -87,7 +87,7 @@
       <span *ngIf="selectedOperation">({{ selectedOperation }})</span>
       <clr-icon shape="caret down"></clr-icon>
     </button>
-    <clr-dropdown-menu *clrIfOpen>
+    <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
       <button type="button" clrDropdownItem *ngFor="let operation of queryOperations" (click)="selectedOperationChange.next(operation.name.value)">{{ operation.name.value }}</button>
     </clr-dropdown-menu>
   </clr-dropdown>

src/app/config.ts

@@ -27,6 +27,7 @@ export default {
     'pl-PL': 'Polish',
     'ko-KR': 'Korean',
     'ro-RO': 'Romanian',
+    'vi-VN': 'Vietnamese',
   },
   query_history_depth: isElectron ? 50 : 7,
   themes: ['light', 'dark'],

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

@@ -97,6 +97,7 @@ <h3 class="modal-title">
                   placeholder="Header key"
                   [ngModel]="header.key"
                   (ngModelChange)="headerKeyChange($event, i)"
+                  (submit)="toggleHeader()"
                 ></app-fancy-input>
               </div>
               <div class="set-header-input-column">
@@ -105,6 +106,7 @@ <h3 class="modal-title">
                   placeholder="Header value"
                   [ngModel]="header.value"
                   (ngModelChange)="headerValueChange($event, i)"
+                  (submit)="toggleHeader()"
                 ></app-fancy-input>
               </div>
               <button class="header-input-remove-button" (click)="removeHeader(i)">&times;</button>
@@ -114,7 +116,7 @@ <h3 class="modal-title">
         <div class="modal-footer">
           <div class="app-dialog-footer">
             <button track-id="add_header" class="app-button active-grey left" (click)="addHeader()">{{ 'ADD_HEADER_TEXT' | translate }}</button>
-            <button class="app-button active-primary right" (click)="toggleHeader($event)">{{ 'SAVE_BUTTON' | translate }}</button>
+            <button class="app-button active-primary right" (click)="toggleHeader()">{{ 'SAVE_BUTTON' | translate }}</button>
           </div>
         </div>
       </clr-modal>

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

@@ -228,7 +228,7 @@ export class WindowComponent implements OnInit {
     this.store.dispatch(new queryActions.SetQueryAction(query, this.windowId));
   }
 
-  toggleHeader(isOpen) {
+  toggleHeader(isOpen = undefined) {
     if (this.showHeaderDialog !== isOpen) {
       this.store.dispatch(new dialogsActions.ToggleHeaderDialogAction(this.windowId));
     }

src/app/effects/query.ts

@@ -83,37 +83,21 @@ export class QueryEffects {
               return observableEmpty();
             }
 
-            // Check if there are more than one operations in the query
-            // If check if there is already a selected operation
-            // Check if the selected operation matches any operation, else ask the user to select again
-            const operations = this.gqlService.getOperations(query);
-
-            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);
-
-              debug.log(operationNameAtCursorIndex, response.data.query.queryEditorState);
-              if (
-                !(
-                  (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.
-                  You need to select the one you want to run from the dropdown.`
-                );
-                this.store.dispatch(new queryActions.SetSelectedOperationAction(response.windowId, { selectedOperation: '' }));
-                return observableEmpty();
-              }
-            } else {
-              // Clear out the selected operation
+            try {
+              const operationData = this.gqlService.getSelectedOperationData({
+                query,
+                selectedOperation,
+                queryCursorIndex: response.data.query.queryEditorState &&
+                  response.data.query.queryEditorState.isFocused &&
+                  response.data.query.queryEditorState.cursorIndex,
+              });
+
+              this.store.dispatch(new queryActions.SetQueryOperationsAction(response.windowId, { operations: operationData.operations }));
+              selectedOperation = operationData.selectedOperation;
+            } catch (err) {
               this.store.dispatch(new queryActions.SetSelectedOperationAction(response.windowId, { selectedOperation: '' }));
+              this.notifyService.warning(err.message);
+              return observableEmpty();
             }
 
             this.store.dispatch(new layoutActions.StartLoadingAction(response.windowId));
@@ -296,11 +280,13 @@ export class QueryEffects {
 
           this.store.dispatch(new docsAction.StartLoadingDocsAction(res.windowId));
           return this.gqlService
-            .setHeaders(headers)
-            .setHTTPMethod(res.data.query.httpVerb)
-            .getIntrospectionRequest(url)
+            .getIntrospectionRequest(url, {
+              method: res.data.query.httpVerb,
+              headers
+            })
             .pipe(
               catchError(err => {
+                this.store.dispatch(new docsAction.StopLoadingDocsAction(res.windowId));
                 const errorObj = err.error || err;
                 let allowsIntrospection = true;
 
@@ -321,13 +307,13 @@ export class QueryEffects {
                     and the server is up and running properly.
                   `);
                 }
-                return observableOf(new docsAction.StopLoadingDocsAction(res.windowId));
+                return observableEmpty();
               }),
               map(introspectionResponse => {
+                this.store.dispatch(new docsAction.StopLoadingDocsAction(res.windowId));
                 const introspectionData = introspectionResponse.body && introspectionResponse.body.data;
                 const streamUrl = introspectionResponse.headers
                   && introspectionResponse.headers.get('X-GraphQL-Event-Stream'); // || '/graphql/stream'; // For development.
-                this.store.dispatch(new docsAction.StopLoadingDocsAction(res.windowId));
                 this.store.dispatch(new streamActions.SetStreamSettingAction(res.windowId, { streamUrl }));
                 if (streamUrl) {
                   this.store.dispatch(new streamActions.StartStreamClientAction(res.windowId));
@@ -400,6 +386,26 @@ export class QueryEffects {
           const subscriptionUrl = this.environmentService.hydrate(res.data.query.subscriptionUrl);
           const query = this.environmentService.hydrate(res.data.query.query);
           const variables = this.environmentService.hydrate(res.data.variables.variables);
+          let selectedOperation = res.data.query.selectedOperation;
+
+          try {
+            const operationData = this.gqlService.getSelectedOperationData({
+              query,
+              selectedOperation,
+              queryCursorIndex: res.data.query.queryEditorState &&
+                res.data.query.queryEditorState.isFocused &&
+                res.data.query.queryEditorState.cursorIndex,
+              selectIfOneOperation: true,
+            });
+
+            this.store.dispatch(new queryActions.SetQueryOperationsAction(res.windowId, { operations: operationData.operations }));
+            selectedOperation = operationData.selectedOperation;
+          } catch (err) {
+            this.store.dispatch(new queryActions.SetSelectedOperationAction(res.windowId, { selectedOperation: '' }));
+            this.notifyService.warning(err.message);
+            return observableEmpty();
+          }
+
           const subscriptionErrorHandler = (err, errMsg?) => {
             if (Array.isArray(err)) {
               err = err[0];
@@ -439,7 +445,8 @@ export class QueryEffects {
             });
             const subscriptionClientRequest = subscriptionClient.request({
               query: query,
-              variables: JSON.parse(variables)
+              variables: JSON.parse(variables),
+              operationName: selectedOperation || undefined,
             }).subscribe({
               next: data => {
                 let strData = '';

src/app/reducers/settings/settings.ts

@@ -30,6 +30,7 @@ export interface State {
     'pl-PL': 'Polish',
     'ko-KR': 'Korean',
     'ro-RO': 'Romanian',
+    'vi-VN': 'Vietnamese',
    */
   language: SettingsLanguage;