Added docView in store.

Added shortcut to go to docs from query editor. Added jump onClick. Closes #640.
altair-graphql · Mar 16, 2019 · 9af5436 · 9af5436
1 parent 154235c
commit 9af5436
Show file tree

Hide file tree

Showing 10 changed files with 162 additions and 57 deletions.
diff --git a/src/app/actions/docs/docs.ts b/src/app/actions/docs/docs.ts
@@ -3,19 +3,32 @@ import { Action } from '@ngrx/store';
 export const TOGGLE_DOCS_VIEW = 'TOGGLE_DOCS_VIEW';
 export const START_LOADING_DOCS = 'START_LOADING_DOCS';
 export const STOP_LOADING_DOCS = 'STOP_LOADING_DOCS';
+export const SET_DOC_VIEW = 'SET_DOC_VIEW';
 
 export class ToggleDocsViewAction implements Action {
-    readonly type = TOGGLE_DOCS_VIEW;
+  readonly type = TOGGLE_DOCS_VIEW;
 
-    constructor(public windowId: string) {}
+  constructor(public windowId: string) {}
 }
 export class StartLoadingDocsAction implements Action {
   readonly type = START_LOADING_DOCS;
 
   constructor(public windowId: string) {}
 }
 export class StopLoadingDocsAction implements Action {
-    readonly type = STOP_LOADING_DOCS;
+  readonly type = STOP_LOADING_DOCS;
 
-    constructor(public windowId: string) {}
+  constructor(public windowId: string) {}
 }
+export class SetDocViewAction implements Action {
+  readonly type = SET_DOC_VIEW;
+
+  constructor(public windowId: string, public payload: { docView: any }) {}
+}
+
+export type Action =
+  | ToggleDocsViewAction
+  | StartLoadingDocsAction
+  | StopLoadingDocsAction
+  | SetDocViewAction
+  ;
diff --git a/src/app/components/doc-viewer/doc-viewer.module.ts b/src/app/components/doc-viewer/doc-viewer.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { ClarityModule } from '@clr/angular';
 
 import { SharedModule } from '../../shared/shared.module';
 
@@ -14,6 +15,7 @@ import { ComponentModule } from '..';
   imports: [
     CommonModule,
     FormsModule,
+    ClarityModule,
     SharedModule,
     ComponentModule,
   ],

diff --git a/src/app/components/doc-viewer/doc-viewer/doc-viewer.component.html b/src/app/components/doc-viewer/doc-viewer/doc-viewer.component.html
@@ -8,8 +8,13 @@
   <div class="doc-viewer-header">
     <span class="doc-viewer-close" (click)="toggleDocsChange.next()">&times;</span>
     <div class="doc-viewer-export-sdl" (click)="exportSDL()" track-id="export_sdl" *ngIf="gqlSchema">Export SDL</div>
-    <div class="doc-viewer-back-link" (click)="goBack()" *ngIf="docView.view !== 'root'" track-id="go_back_docs">
-      &#8592; {{ 'DOCS_GO_BACK_TEXT' | translate }}
+    <div class="doc-viewer-navigation">
+      <div class="doc-viewer-back-link" (click)="goBack()" *ngIf="docView.view !== 'root' && docHistory.length" track-id="go_back_docs">
+        &#8592; {{ 'DOCS_GO_BACK_TEXT' | translate }}
+      </div>
+      <div class="doc-viewer-home-link" (click)="goHome()" *ngIf="docView.view !== 'root'">
+        <clr-icon shape="home"></clr-icon>
+      </div>
     </div>
   </div>
   <div class="doc-viewer-search-wrapper">

diff --git a/src/app/components/doc-viewer/doc-viewer/doc-viewer.component.ts b/src/app/components/doc-viewer/doc-viewer/doc-viewer.component.ts
@@ -26,7 +26,13 @@ export class DocViewerComponent implements OnChanges {
   @Input() isLoading = false;
   @Input() addQueryDepthLimit = config.add_query_depth_limit;
   @Input() tabSize = config.tab_size;
+  @Input() docView = {
+    view: 'root', // type, field, root, search
+    parentType: 'Query', // used by field views
+    name: 'Conference' // identifies type/field
+  };
   @Output() toggleDocsChange = new EventEmitter();
+  @Output() setDocViewChange = new EventEmitter<{ view?, parentType?, name? }>();
   @Output() addQueryToEditorChange = new EventEmitter();
   @Output() exportSDLChange = new EventEmitter();
 
@@ -43,12 +49,6 @@ export class DocViewerComponent implements OnChanges {
 
   docHistory = [];
 
-  docView = {
-    view: 'root', // type, field, root, search
-    parentType: 'Query', // used by field views
-    name: 'Conference' // identifies type/field
-  };
-
   searchResult = [];
   searchTerm = '';
 
@@ -235,7 +235,7 @@ export class DocViewerComponent implements OnChanges {
       return false;
     }
     this.updateDocHistory();
-    this.docView.view = 'search';
+    this.setDocViewChange.next({ view: 'search' });
     this.searchResult = this.index.filter(item => new RegExp(term, 'i').test(item.search));
     debug.log(this.searchResult);
   }
@@ -254,16 +254,23 @@ export class DocViewerComponent implements OnChanges {
   goBack() {
     // console.log(this.docHistory);
     if (this.docHistory.length) {
-      this.docView = this.docHistory.pop();
+      this.setDocViewChange.next(this.docHistory.pop());
     }
   }
 
+  /**
+   * Go back to root view
+   */
+  goHome() {
+    this.setDocViewChange.next({ view: 'root' });
+  }
+
   /**
    * Update the doc history with the current view
    */
   updateDocHistory() {
     if (this.docView && this.docView.view !== 'search') {
-      this.docHistory.push(Object.assign({}, this.docView));
+      this.docHistory.push({ ...this.docView });
     }
   }
 
@@ -273,9 +280,7 @@ export class DocViewerComponent implements OnChanges {
    */
   goToType(name) {
     this.updateDocHistory();
-    // console.log('Going to type..', name);
-    this.docView.view = 'type';
-    this.docView.name = name.replace(/[\[\]!]/g, '');
+    this.setDocViewChange.next({ view: 'type', name: name.replace(/[\[\]!]/g, '') });
   }
 
   /**
@@ -285,11 +290,7 @@ export class DocViewerComponent implements OnChanges {
    */
   goToField(name, parentType) {
     this.updateDocHistory();
-    // console.log('Going to field..', name, parentType, this.gqlSchema);
-
-    this.docView.view = 'field';
-    this.docView.name = name.replace(/[\[\]!]/g, '');
-    this.docView.parentType = parentType.replace(/[\[\]!]/g, '');
+    this.setDocViewChange.next({ view: 'field', name: name.replace(/[\[\]!]/g, ''), parentType: parentType.replace(/[\[\]!]/g, '') });
   }
 
   /**

diff --git a/src/app/components/query-editor/query-editor.component.ts b/src/app/components/query-editor/query-editor.component.ts
@@ -26,11 +26,18 @@ import 'codemirror/addon/fold/indent-fold';
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/edit/closebrackets';
 import 'codemirror/addon/display/autorefresh';
+import 'codemirror/addon/dialog/dialog';
+import 'codemirror/addon/search/search';
+import 'codemirror/addon/search/searchcursor';
+import 'codemirror/addon/search/matchesonscrollbar';
+import 'codemirror/addon/search/jump-to-line';
+import 'codemirror/addon/scroll/annotatescrollbar';
 import 'codemirror-graphql/hint';
-// import 'codemirror-graphql/lint';
+import 'codemirror-graphql/lint';
 import 'codemirror-graphql/mode';
-// import 'codemirror-graphql/info';
+import 'codemirror-graphql/info';
 import 'codemirror-graphql/jump';
+import getTypeInfo from 'codemirror-graphql/utils/getTypeInfo';
 import '../../utils/codemirror/graphql-linter';
 
 import { GqlService, NotifyService } from 'app/services';
@@ -60,6 +67,7 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
   @Output() fileVariableDataChange = new EventEmitter();
   @Output() deleteFileVariableChange = new EventEmitter();
   @Output() queryEditorStateChange = new EventEmitter<fromQuery.QueryEditorState>();
+  @Output() showTokenInDocsChange = new EventEmitter();
 
   @ViewChild('editor') editor;
 
@@ -77,7 +85,13 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
       'Ctrl-Space': (cm) => cm.showHint({ completeSingle: true }),
       'Alt-Space': (cm) => cm.showHint({ completeSingle: true }),
       'Cmd-/': (cm) => cm.execCommand('toggleComment'),
-      'Ctrl-/': (cm) => cm.execCommand('toggleComment')
+      'Ctrl-/': (cm) => cm.execCommand('toggleComment'),
+
+      'Alt-F': 'findPersistent',
+      'Ctrl-F': 'findPersistent',
+
+      // show current token parent type in docs
+      'Ctrl-D': cm => this.onShowInDocsByToken(cm),
     },
     gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
     autoCloseBrackets: true,
@@ -88,8 +102,12 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
     hintOptions: {
       completeSingle: false
     },
-    // info: {},
-    jump: {}
+    info: {
+      onClick: reference => this.onShowInDocsByReference(reference),
+    },
+    jump: {
+      onClick: reference => this.onShowInDocsByReference(reference),
+    }
   };
 
   constructor(
@@ -167,18 +185,39 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
     this.queryEditorStateChange.next({ isFocused, cursorIndex });
   }
 
-  /**
-   * Formats the query in the editor
-   */
-  prettifyCode() {
-    // if (this.editor) {
-    //   this.editor.codeMirror.operation(() => {
-    //     const len = this.editor.codeMirror.lineCount();
-    //     for (let i = 0; i < len; i++) {
-    //       this.editor.codeMirror.indentLine(i);
-    //     }
-    //   });
-    // }
+  onShowInDocsByToken(cm) {
+    const cursor = cm.getCursor();
+    const token = cm.getTokenAt(cursor);
+    const typeInfo = getTypeInfo(this.gqlSchema, token.state);
+
+    if (typeInfo.fieldDef && typeInfo.parentType) {
+      this.showTokenInDocsChange.next({
+        view: 'field',
+        parentType: typeInfo.parentType.inspect(),
+        name: typeInfo.fieldDef.name,
+      });
+    } else if (typeInfo.type) {
+      this.showTokenInDocsChange.next({
+        view: 'type',
+        name: typeInfo.type.inspect()
+      });
+    }
+    this.editor.codeMirror.getInputField().blur();
+  }
+
+  onShowInDocsByReference(reference) {
+    if (reference.field && reference.type) {
+      this.showTokenInDocsChange.next({
+        view: 'field',
+        parentType: reference.type.inspect(),
+        name: reference.field.name,
+      });
+    } else if (reference.type) {
+      this.showTokenInDocsChange.next({
+        view: 'type',
+        name: reference.type.inspect()
+      });
+    }
   }
 
   /**
@@ -190,7 +229,7 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
       debug.log('Updating schema...', schema);
       this.editorConfig.lint.schema = schema;
       this.editorConfig.hintOptions.schema = schema;
-      // this.editorConfig.info.schema = schema;
+      this.editorConfig.info.schema = schema;
       this.editorConfig.jump.schema = schema;
     }
   }

diff --git a/src/app/containers/window/window.component.html b/src/app/containers/window/window.component.html
@@ -42,6 +42,7 @@
           (fileVariableDataChange)="updateFileVariableData($event)"
           (deleteFileVariableChange)="deleteFileVariable($event)"
           (queryEditorStateChange)="setQueryEditorState($event)"
+          (showTokenInDocsChange)="onShowTokenInDocs($event)"
           [query]="query"
           [gqlSchema]="gqlSchema"
           [tabSize]="tabSize$ | async"
@@ -62,12 +63,14 @@
           (clearSubscriptionChange)="clearSubscription()"
         ></app-query-result>
         <app-doc-viewer
+          [docView]="docView$ | async"
           [gqlSchema]="gqlSchema"
           [allowIntrospection]="allowIntrospection$ | async"
           [ngClass]="{'hide-doc': !(showDocs$ | async)}"
           [isLoading]="docsIsLoading$ | async"
           [addQueryDepthLimit] = "addQueryDepthLimit$ | async"
           [tabSize]="tabSize$ | async"
+          (setDocViewChange)="setDocView($event)"
           (toggleDocsChange)="toggleDocs()"
           (addQueryToEditorChange)="addQueryToEditor($event)"
           (exportSDLChange)="exportSDL()"

diff --git a/src/app/containers/window/window.component.ts b/src/app/containers/window/window.component.ts
@@ -1,5 +1,5 @@
 
-import { distinctUntilChanged, map, switchMap } from 'rxjs/operators';
+import { distinctUntilChanged, map, switchMap, take } from 'rxjs/operators';
 import {
   Component,
   ViewChild,
@@ -38,6 +38,7 @@ import { Observable, empty as observableEmpty } from 'rxjs';
 export class WindowComponent implements OnInit {
   queryResult$: Observable<any>;
   showDocs$: Observable<boolean>;
+  docView$: Observable<any>;
   docsIsLoading$: Observable<boolean>;
   headers$: Observable<fromHeader.State>;
   variables$: Observable<fromVariable.State>;
@@ -101,6 +102,7 @@ export class WindowComponent implements OnInit {
 
     this.queryResult$ = this.getWindowState().pipe(select(fromRoot.getQueryResult));
     this.showDocs$ = this.getWindowState().pipe(select(fromRoot.getShowDocs));
+    this.docView$ = this.getWindowState().pipe(select(fromRoot.getDocView));
     this.docsIsLoading$ = this.getWindowState().pipe(select(fromRoot.getDocsLoading));
     this.headers$ = this.getWindowState().pipe(select(fromRoot.getHeaders));
     this.variables$ = this.getWindowState().pipe(select(fromRoot.getVariables));
@@ -257,6 +259,19 @@ export class WindowComponent implements OnInit {
     }
   }
 
+  setDocView(docView) {
+    this.store.dispatch(new docsActions.SetDocViewAction(this.windowId, { docView }))
+  }
+  onShowTokenInDocs(docView) {
+    this.setDocView(docView);
+    this.showDocs$.pipe(
+      take(1)
+    ).subscribe(docsShown => {
+      if (!docsShown) {
+        this.toggleDocs();
+      }
+    });
+  }
   toggleDocs() {
     this.store.dispatch(new docsActions.ToggleDocsViewAction(this.windowId));
   }

diff --git a/src/app/reducers/docs/docs.ts b/src/app/reducers/docs/docs.ts
@@ -5,21 +5,42 @@ import * as docs from '../../actions/docs/docs';
 export interface State {
     showDocs: boolean;
     isLoading: boolean;
+    docView: {
+        /**
+         * type, field, root, search
+         */
+        view: string,
+        /**
+         * used by field views
+         */
+        parentType: string,
+        /**
+         * identifies type/field
+         */
+        name: string
+    };
 }
 
 export const initialState: State = {
     showDocs: false,
-    isLoading: false
+    isLoading: false,
+    docView: {
+        view: 'root',
+        parentType: 'Query',
+        name: ''
+    },
 };
 
-export function docsReducer(state = initialState, action: Action): State {
+export function docsReducer(state = initialState, action: docs.Action): State {
     switch (action.type) {
         case docs.TOGGLE_DOCS_VIEW:
             return Object.assign({}, state, { showDocs: !state.showDocs });
         case docs.START_LOADING_DOCS:
             return Object.assign({}, state, { isLoading: true });
         case docs.STOP_LOADING_DOCS:
             return Object.assign({}, state, { isLoading: false });
+        case docs.SET_DOC_VIEW:
+            return { ...state, docView: action.payload.docView };
         default:
             return state;
     }

diff --git a/src/app/reducers/docs/selectors.ts b/src/app/reducers/docs/selectors.ts
@@ -4,4 +4,5 @@ import { initialState } from './docs';
 
 export const getDocsState = (state: PerWindowState) => state ? state.docs : { ...initialState };
 export const getShowDocs = createSelector(getDocsState, state => state.showDocs);
+export const getDocView = createSelector(getDocsState, state => state.docView || initialState.docView);
 export const getDocsLoading = createSelector(getDocsState, state => state.isLoading);