Fix: validate json

src/app/views/query-runner/QueryRunner.tsx

@@ -1,5 +1,6 @@
-import { IDropdownOption } from 'office-ui-fabric-react';
+import { IDropdownOption, MessageBarType } from 'office-ui-fabric-react';
 import React, { Component } from 'react';
+import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
@@ -9,6 +10,7 @@ import {
 } from '../../../types/query-runner';
 import * as queryActionCreators from '../../services/actions/query-action-creators';
 import * as queryInputActionCreators from '../../services/actions/query-input-action-creators';
+import * as queryStatusActionCreators from '../../services/actions/query-status-action-creator';
 import { parseSampleUrl } from '../../utils/sample-url-generation';
 import './query-runner.scss';
 import QueryInput from './QueryInput';
@@ -66,10 +68,21 @@ export class QueryRunner extends Component<
 
   private handleOnRunQuery = () => {
     const { sampleBody } = this.state;
-    const { actions, sampleQuery } = this.props;
+    const { actions, sampleQuery, } = this.props;
+    const { intl: { messages } }: any = this.props;
 
     if (sampleBody) {
-      sampleQuery.sampleBody = JSON.parse(sampleBody);
+      try {
+        sampleQuery.sampleBody = JSON.parse(sampleBody);
+      } catch (error) {
+        actions!.setQueryResponseStatus({
+          ok: false,
+          statusText: messages['Malformed JSON body'],
+          status: `${messages['Review the request body']} ${error}`,
+          messageType: MessageBarType.error
+        });
+        return;
+      }
     }
 
     if (actions) {
@@ -136,7 +149,7 @@ export class QueryRunner extends Component<
 function mapDispatchToProps(dispatch: Dispatch): object {
   return {
     actions: bindActionCreators(
-      { ...queryActionCreators, ...queryInputActionCreators },
+      { ...queryActionCreators, ...queryInputActionCreators, ...queryStatusActionCreators },
       dispatch
     )
   };
@@ -148,7 +161,9 @@ function mapStateToProps(state: any) {
   };
 }
 
+// @ts-ignore
+const IntlQueryRunner = injectIntl(QueryRunner);
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(QueryRunner);
+)(IntlQueryRunner);

src/messages/GE.json

@@ -290,9 +290,9 @@
   "Consent": "Consent",
   "permissions required to run the query": "The following permissions are required to run the query. To consent to the permissions, click Consent.",
   "tab": " tab",
-  "View the":" View the",
+  "View the": " View the",
   "viewing a cached set": "You are viewing a cached set of samples because of a network connection failure.",
-  "see more queries":"See more queries in the",
+  "see more queries": "See more queries in the",
   "Microsoft Graph API Reference docs": "Microsoft Graph API Reference docs.",
   "Fetching permissions": "Fetching permissions",
   "Authentication failed": "Authentication failed",
@@ -304,5 +304,7 @@
   "permissions not found": "We did not find permissions",
   "selected": "selected",
   "Search sample queries": "Search sample queries",
-  "Search history items": "Search history items"
+  "Search history items": "Search history items",
+  "Malformed JSON body": "Malformed JSON body",
+  "Review the request body": "Review the request body and fix any malformed JSON."
 }

src/types/query-runner.ts

@@ -22,6 +22,7 @@ export interface IQueryRunnerProps {
     runQuery: Function;
     addRequestHeader: Function;
     setSampleQuery: Function;
+    setQueryResponseStatus: Function;
   };
 }