Added tabSize setting to prettier format and query results.

Closes #741.
altair-graphql · May 13, 2019 · fb783b3 · fb783b3
1 parent fc80016
commit fb783b3
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/src/app/components/query-result/query-result.component.ts b/src/app/components/query-result/query-result.component.ts
@@ -39,6 +39,7 @@ export class QueryResultComponent implements OnChanges {
   @Input() isSubscribed = false;
   @Input() subscriptionResponses = [];
   @Input() subscriptionUrl = '';
+  @Input() tabSize = 2;
 
   @Output() downloadResultChange = new EventEmitter();
   @Output() stopSubscriptionChange = new EventEmitter();
@@ -49,6 +50,8 @@ export class QueryResultComponent implements OnChanges {
   resultEditorConfig = {
     mode: 'graphql-results',
     json: true,
+    tabSize: this.tabSize,
+    indentUnit: this.tabSize,
     lineWrapping: true,
     lineNumbers: true,
     foldGutter: true,

diff --git a/src/app/containers/window/window.component.html b/src/app/containers/window/window.component.html
@@ -58,6 +58,7 @@
           [isSubscribed]="isSubscribed$ | async"
           [subscriptionResponses]="subscriptionResponses$ | async"
           [subscriptionUrl]="subscriptionUrl"
+          [tabSize]="tabSize$ | async"
 
           (downloadResultChange)="downloadResult()"
           (stopSubscriptionChange)="stopSubscription()"

diff --git a/src/app/effects/query.ts b/src/app/effects/query.ts
@@ -500,13 +500,13 @@ export class QueryEffects {
     prettifyQuery$: Observable<queryActions.Action> = this.actions$
       .ofType(queryActions.PRETTIFY_QUERY)
       .pipe(
-        withLatestFrom(this.store, (action: queryActions.Action, state) => {
-          return { data: state.windows[action.windowId], windowId: action.windowId, action };
+        withLatestFrom(this.store, (action: queryActions.Action, state: fromRoot.State) => {
+          return { data: state.windows[action.windowId], windowId: action.windowId, action, settings: state.settings };
         }),
         switchMap(res => {
           let prettified = '';
           try {
-            prettified = this.gqlService.prettify(res.data.query.query);
+            prettified = this.gqlService.prettify(res.data.query.query, res.settings.tabSize);
           } catch (err) {
             debug.log(err);
             this.notifyService.error('Your query does not appear to be valid. Please check it.');

diff --git a/src/app/services/gql/gql.service.ts b/src/app/services/gql/gql.service.ts
@@ -378,9 +378,9 @@ export class GqlService {
    * Prettifies (formats) a given query
    * @param query
    */
-  prettify(query: string) {
+  prettify(query: string, tabWidth: number = 2) {
     // return print(parse(query));
-    return prettier.format(query, { parser: 'graphql', plugins: [ prettierGraphql ] });
+    return prettier.format(query, { parser: 'graphql', plugins: [ prettierGraphql ], tabWidth });
   }
 
   /**