Added export SDL functionality.

Closes #215.

src/app/actions/gql-schema/gql-schema.ts

@@ -6,28 +6,41 @@ export const SET_INTROSPECTION_FROM_DB = 'SET_INTROSPECTION_FROM_DB';
 export const SET_SCHEMA = 'SET_SCHEMA';
 export const SET_ALLOW_INTROSPECTION = 'SET_ALLOW_INTROSPECTION';
 
+export const EXPORT_SDL = 'EXPORT_SDL';
+
 export class SetIntrospectionAction implements Action {
-    readonly type = SET_INTROSPECTION;
+  readonly type = SET_INTROSPECTION;
 
-    constructor(public payload: any, public windowId: string) {}
+  constructor(public payload: any, public windowId: string) { }
 }
 
 export class SetIntrospectionFromDbAction implements Action {
-    readonly type = SET_INTROSPECTION_FROM_DB;
+  readonly type = SET_INTROSPECTION_FROM_DB;
 
-    constructor(public payload: any, public windowId: string) {}
+  constructor(public payload: any, public windowId: string) { }
 }
 
 export class SetSchemaAction implements Action {
-    readonly type = SET_SCHEMA;
+  readonly type = SET_SCHEMA;
 
-    constructor(public windowId: string, public payload: any) {}
+  constructor(public windowId: string, public payload: any) { }
 }
 
 export class SetAllowIntrospectionAction implements Action {
-    readonly type = SET_ALLOW_INTROSPECTION;
+  readonly type = SET_ALLOW_INTROSPECTION;
+
+  constructor(public payload: any, public windowId: string) { }
+}
+
+export class ExportSDLAction implements Action {
+  readonly type = EXPORT_SDL;
 
-    constructor(public payload: any, public windowId: string) {}
+  constructor(public windowId: string) { }
 }
 
-export type Action = SetIntrospectionAction | SetIntrospectionFromDbAction | SetSchemaAction | SetAllowIntrospectionAction;
+export type Action =
+  | SetIntrospectionAction
+  | SetIntrospectionFromDbAction
+  | SetSchemaAction
+  | SetAllowIntrospectionAction
+  | ExportSDLAction;

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

@@ -7,6 +7,7 @@
     </div>
   <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>

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

@@ -54,6 +54,20 @@ app-doc-viewer{
     color: $theme-font-color;
     cursor: pointer;
 }
+.doc-viewer-export-sdl {
+  position: absolute;
+  transform: translateX(-50%);
+  left: 50%;
+  line-height: 30px;
+  font-size: 12px;
+  color: $orange;
+  cursor: pointer;
+  opacity: .5;
+  transition: all .3s ease;
+  &:hover {
+    opacity: 1;
+  }
+}
 .doc-viewer-back-link{
     padding: 10px 0;
     color: $blue;

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

@@ -24,6 +24,7 @@ export class DocViewerComponent implements OnChanges {
   @Input() isLoading = false;
   @Output() toggleDocsChange = new EventEmitter();
   @Output() addQueryToEditorChange = new EventEmitter();
+  @Output() exportSDLChange = new EventEmitter();
 
   rootTypes = [];
   index = [];
@@ -398,4 +399,8 @@ export class DocViewerComponent implements OnChanges {
     }
     this.addQueryToEditorChange.next(this.generateQuery(name, parentType));
   }
+
+  exportSDL() {
+    this.exportSDLChange.next();
+  }
 }

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

@@ -63,6 +63,7 @@
           [isLoading]="docsIsLoading$ | async"
           (toggleDocsChange)="toggleDocs()"
           (addQueryToEditorChange)="addQueryToEditor($event)"
+          (exportSDLChange)="exportSDL()"
         ></app-doc-viewer>
       </div>
     </div>

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

@@ -284,6 +284,10 @@ export class WindowComponent implements OnInit {
     this.store.dispatch(new windowActions.ExportWindowAction({ windowId: this.windowId }));
   }
 
+  exportSDL() {
+    this.store.dispatch(new schemaActions.ExportSDLAction(this.windowId));
+  }
+
 
   trackByFn(index, item) {
     return index;

src/app/effects/query.ts

@@ -16,7 +16,7 @@ import * as dbActions from '../actions/db/db';
 import * as docsAction from '../actions/docs/docs';
 import * as windowsMetaActions from '../actions/windows-meta/windows-meta';
 
-import { downloadJson } from '../utils';
+import { downloadJson, downloadData } from '../utils';
 
 @Injectable()
 export class QueryEffects {
@@ -354,6 +354,24 @@ export class QueryEffects {
         return Observable.empty();
       });
 
+    @Effect()
+    exportSDL$: Observable<Action> = this.actions$
+      .ofType(gqlSchemaActions.EXPORT_SDL)
+      .withLatestFrom(this.store, (action: gqlSchemaActions.Action, state: fromRoot.State) => {
+        return { data: state.windows[action.windowId], windowId: action.windowId, action };
+      })
+      .switchMap(res => {
+
+        if (res.data.schema.schema) {
+          const sdl = this.gqlService.getSDL(res.data.schema.schema);
+
+          if (sdl) {
+            downloadData(sdl, 'sdl', { fileType: 'gql' });
+          }
+        }
+        return Observable.empty();
+      });
+
     // Get the introspection after setting the URL
     constructor(
       private actions$: Actions,

src/app/utils/index.ts

@@ -2,20 +2,22 @@ import * as toSnakeCase from 'to-snake-case';
 const fileDialog = require('file-dialog');
 
 /**
- * Download an object as a JSON file
- * @param obj The object to be downloaded
- * @param fileName The name the file will be called
+ * Download the specified data with the provided options
+ * @param data data string to download
+ * @param fileName name of downloaded file
+ * @param opts configuration options
  */
-export const downloadJson = (obj, fileName = 'response', opts = undefined) => {
+export const downloadData = (data, fileName = 'data', opts = undefined) => {
   let _opts = {
-    fileType: 'json'
+    dataUriAttr: 'text/plain;charset=utf-8',
+    fileType: 'txt'
   };
 
   if (opts) {
     _opts = { ..._opts, ...opts };
   }
 
-  const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(obj));
+  const dataStr = `data:${_opts.dataUriAttr},${data}`;
   const downloadLink = document.createElement('a');
   const linkText = document.createTextNode('Download');
   downloadLink.appendChild(linkText);
@@ -26,6 +28,29 @@ export const downloadJson = (obj, fileName = 'response', opts = undefined) => {
   downloadLink.click();
 };
 
+/**
+ * Download an object as a JSON file
+ * @param obj The object to be downloaded
+ * @param fileName The name the file will be called
+ */
+export const downloadJson = (obj, fileName = 'response', opts = undefined) => {
+  let _opts = {
+    dataUriAttr: 'text/json;charset=utf-8',
+    fileType: 'json'
+  };
+
+  if (opts) {
+    _opts = { ..._opts, ...opts };
+  }
+
+  const dataStr = encodeURIComponent(JSON.stringify(obj));
+  downloadData(dataStr, fileName, _opts);
+};
+
+/**
+ * Get file data as string
+ * @param files FileList object
+ */
 export const getFileStr = files => {
   return new Promise((resolve, reject) => {
     const fileReader = new FileReader();