Added SEND_INTROSPECTION_QUERY_REQUEST action, and reload docs button.

src/app/actions/query/query.ts

@@ -2,6 +2,7 @@ import { Action } from '@ngrx/store';
 
 export const SET_URL = 'SET_URL';
 export const SET_URL_FROM_DB = 'SET_URL_FROM_DB';
+export const SEND_INTROSPECTION_QUERY_REQUEST = 'SEND_INTROSPECTION_QUERY_REQUEST';
 
 export const SET_QUERY = 'SET_QUERY';
 export const SET_QUERY_FROM_DB = 'SET_QUERY_FROM_DB';
@@ -29,6 +30,12 @@ export class SetUrlFromDbAction implements Action {
     constructor(public payload: string, public windowId: string) {}
 }
 
+export class SendIntrospectionQueryRequestAction implements Action {
+    readonly type = SEND_INTROSPECTION_QUERY_REQUEST;
+
+    constructor(public windowId: string, public payload?) {}
+}
+
 export class SetQueryAction implements Action {
     readonly type = SET_QUERY;
 
@@ -98,6 +105,7 @@ export class ShowEditorAlertAction implements Action {
 export type Action =
     SetUrlAction |
     SetUrlFromDbAction |
+    SendIntrospectionQueryRequestAction |
     SetQueryAction |
     SetQueryFromDbAction |
     SetQueryResultAction |

src/app/components/action-bar/action-bar.component.html

@@ -11,6 +11,7 @@
     <button class="app-button" (click)="this.toggleHeaderDialog.next()">Set Headers</button>
     <button class="app-button" (click)="this.toggleVariableDialog.next()">Set Variables</button>
     <div class="actions-right right">
-        <button class="app-button" (click)="toggleDocs.next()" [ngClass]="{'active-grey': showDocs}">Show Docs</button>
+        <button class="app-button" (click)="reloadDocsChange.next()">Reload Docs</button>
+        <button class="app-button" (click)="toggleDocsChange.next()" [ngClass]="{'active-grey': showDocs}">Show Docs</button>
     </div>
-</div>
+</div>

src/app/components/action-bar/action-bar.component.ts

@@ -15,7 +15,8 @@ export class ActionBarComponent {
   @Input() showDocs;
   @Output() toggleHeaderDialog = new EventEmitter();
   @Output() toggleVariableDialog = new EventEmitter();
-  @Output() toggleDocs = new EventEmitter();
+  @Output() toggleDocsChange = new EventEmitter();
+  @Output() reloadDocsChange = new EventEmitter();
   @Output() prettifyCodeChange = new EventEmitter();
   @Output() sendRequest = new EventEmitter();
   @Output() clearEditorChange = new EventEmitter();

src/app/components/doc-viewer/doc-viewer/doc-viewer.component.html

@@ -1,6 +1,6 @@
 <div class="app-doc-viewer" *ngIf="allowIntrospection">
   <div class="doc-viewer-header">
-    <span class="doc-viewer-close" (click)="toggleDocs.next()">&times;</span>
+    <span class="doc-viewer-close" (click)="toggleDocsChange.next()">&times;</span>
     <div class="doc-viewer-back-link" (click)="goBack()" *ngIf="docView.view !== 'root'">
       &#8592; Back
     </div>
@@ -59,4 +59,4 @@
 </div>
 <div class="app-doc-notice" *ngIf="!allowIntrospection">
   Sorry. The provided server doesn't support introspection.
-</div>
+</div>

src/app/components/doc-viewer/doc-viewer/doc-viewer.component.scss

@@ -37,6 +37,7 @@ app-doc-viewer{
     padding: 10px 0;
     color: $blue;
     cursor: pointer;
+    display: inline-block;
 }
 .doc-viewer-breadcrumbs-container{
     padding: 10px 0;

src/app/components/doc-viewer/doc-viewer/doc-viewer.component.ts

@@ -16,7 +16,7 @@ export class DocViewerComponent implements OnChanges {
 
   @Input() gqlSchema = null;
   @Input() allowIntrospection = true;
-  @Output() toggleDocs = new EventEmitter();
+  @Output() toggleDocsChange = new EventEmitter();
   @Output() addQueryToEditorChange = new EventEmitter();
 
   rootTypes = [];

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

@@ -37,7 +37,8 @@
       (toggleVariableDialog)="toggleVariableDialog()"
       (prettifyCodeChange)="prettifyCode()"
       (sendRequest)="sendRequest()"
-      (toggleDocs)="toggleDocs()"
+      (toggleDocsChange)="toggleDocs()"
+      (reloadDocsChange)="reloadDocs()"
       (clearEditorChange)="clearEditor()"
       [showDocs]="showDocs"
   ></app-action-bar>
@@ -59,7 +60,7 @@
       [gqlSchema]="gqlSchema"
       [allowIntrospection]="allowIntrospection"
       [ngClass]="{'show-doc': showDocs}"
-      (toggleDocs)="toggleDocs()"
+      (toggleDocsChange)="toggleDocs()"
       (addQueryToEditorChange)="addQueryToEditor($event)"
     ></app-doc-viewer>
   </main>
@@ -95,4 +96,4 @@
       (variablesChange)="updateVariables($event)"
     ></app-set-variable-dialog>
   </div>
-</div>
+</div>

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

@@ -113,6 +113,7 @@ export class WindowComponent implements OnInit {
   setApiUrl() {
     const url = this.urlInput.nativeElement.value;
     this.store.dispatch(new queryActions.SetUrlAction(url, this.windowId));
+    this.store.dispatch(new queryActions.SendIntrospectionQueryRequestAction(this.windowId));
   }
 
   sendRequest() {
@@ -139,6 +140,10 @@ export class WindowComponent implements OnInit {
     this.store.dispatch(new docsActions.ToggleDocsViewAction(this.windowId));
   }
 
+  reloadDocs() {
+    this.store.dispatch(new queryActions.SendIntrospectionQueryRequestAction(this.windowId));
+  }
+
   addHeader() {
     this.store.dispatch(new headerActions.AddHeaderAction(this.windowId));
   }

src/app/effects/query.ts

@@ -151,13 +151,16 @@ export class QueryEffects {
 
     @Effect()
     getIntrospectionForUrl$: Observable<queryActions.Action> = this.actions$
-        .ofType(queryActions.SET_URL)
-        .switchMap((data: queryActions.Action) => {
-            if (!data.payload) {
+        .ofType(queryActions.SEND_INTROSPECTION_QUERY_REQUEST)
+        .withLatestFrom(this.store, (action: queryActions.Action, state) => {
+            return { data: state.windows[action.windowId], windowId: action.windowId, action };
+        })
+        .switchMap((res) => {
+            if (!res.data.query.url) {
                 return Observable.empty();
             }
 
-            return this.gqlService.getIntrospectionRequest(data.payload)
+            return this.gqlService.getIntrospectionRequest(res.data.query.url)
                 .catch(err => {
                     const errorObj = err;
                     let allowsIntrospection = true;
@@ -172,7 +175,7 @@ export class QueryEffects {
 
                     // If the server does not support introspection
                     if (!allowsIntrospection) {
-                        this.store.dispatch(new gqlSchemaActions.SetAllowIntrospectionAction(false, data.windowId));
+                        this.store.dispatch(new gqlSchemaActions.SetAllowIntrospectionAction(false, res.windowId));
                     }
                     return Observable.empty();
                 })
@@ -181,8 +184,8 @@ export class QueryEffects {
                         return Observable.empty();
                     }
 
-                    this.store.dispatch(new gqlSchemaActions.SetAllowIntrospectionAction(true, data.windowId));
-                    return new gqlSchemaActions.SetIntrospectionAction(introspectionData, data.windowId);
+                    this.store.dispatch(new gqlSchemaActions.SetAllowIntrospectionAction(true, res.windowId));
+                    return new gqlSchemaActions.SetIntrospectionAction(introspectionData, res.windowId);
                 });
         });