Fix: create onenote page (#708)

* display the page content in the request body

* fix linting errors

* add appropriate content type header

* remove filter for content-type header

* refine comment for clarity

* upgrade to the latest javascript sdk

* remove content type header checks

* simplify json content check

* refactor code to be concise

package.json

@@ -6,7 +6,7 @@
     "@babel/core": "7.2.2",
     "@microsoft/applicationinsights-react-js": "2.3.1",
     "@microsoft/applicationinsights-web": "2.3.1",
-    "@microsoft/microsoft-graph-client": "2.0.0",
+    "@microsoft/microsoft-graph-client": "2.1.0",
     "@svgr/webpack": "4.1.0",
     "@uifabric/react-cards": "0.109.101",
     "@uifabric/styling": "7.13.1",

src/app/services/actions/query-action-creator-util.ts

@@ -100,11 +100,6 @@ const makeRequest = (httpVerb: string, scopes: string[]): Function => {
 
     if (query.sampleHeaders && query.sampleHeaders.length > 0) {
       query.sampleHeaders.forEach(header => {
-
-        // We are relying on the graph client to set the content type header.
-        if (header.name.toLowerCase() === 'content-type') {
-          return;
-        }
         sampleHeaders[header.name] = header.value;
       });
     }

src/app/views/query-runner/request/Request.tsx

@@ -24,7 +24,6 @@ export class Request extends Component<IRequestComponent, any> {
       handleOnEditorChange,
       sampleBody,
       mode,
-      mobileScreen,
       intl: { messages },
     }: any = this.props;
 
@@ -64,7 +63,7 @@ export class Request extends Component<IRequestComponent, any> {
           itemIcon='AuthenticatorApp'
           onRenderItemLink={this.getTooltipDisplay}
           title={messages['Access Token']}
-          headerText={ messages['Access Token']}>
+          headerText={messages['Access Token']}>
           <Auth />
         </PivotItem>
       );

src/app/views/sidebar/sample-queries/SampleQueries.tsx

@@ -17,7 +17,7 @@ import {
   styled,
   TooltipHost
 } from 'office-ui-fabric-react';
-import React, { ChangeEvent, Component } from 'react';
+import React, { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
@@ -35,6 +35,7 @@ import { getStyleFor } from '../../../utils/badge-color';
 import { substituteTokens } from '../../../utils/token-helpers';
 import { classNames } from '../../classnames';
 import { sidebarStyles } from '../Sidebar.styles';
+import { isJsonString } from './sample-query-utils';
 
 export class SampleQueries extends Component<ISampleQueriesProps, any> {
 
@@ -86,11 +87,11 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
     telemetry.trackEvent(
       LINK_CLICK_EVENT,
       {
-         ComponentName: 'Documentation link',
-         SampleId: item.id,
-         SampleName: item.humanName,
-         SampleCategory: item.category,
-         Link: item.docLink
+        ComponentName: 'Documentation link',
+        SampleId: item.id,
+        SampleName: item.humanName,
+        SampleCategory: item.category,
+        Link: item.docLink
       });
   }
 
@@ -271,16 +272,17 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
           actions.runQuery(sampleQuery);
         }
         telemetry.trackEvent(
-         LISTITEM_CLICK_EVENT,
-         {
+          LISTITEM_CLICK_EVENT,
+          {
             ComponentName: 'Sample query list item',
             SampleId: selectedQuery.id,
             SampleName: selectedQuery.humanName,
             SampleCategory: selectedQuery.category,
             QuerySignature: ''
-         });
+          });
       } else {
-        sampleQuery.sampleBody = (sampleQuery.sampleBody) ? JSON.parse(sampleQuery.sampleBody) : undefined;
+        sampleQuery.sampleBody = (sampleQuery.sampleBody && isJsonString(sampleQuery.sampleBody))
+          ? JSON.parse(sampleQuery.sampleBody) : undefined;
         if (selectedQuery.tip) { displayTipMessage(actions, selectedQuery); }
       }
       actions.setSampleQuery(sampleQuery);
@@ -368,7 +370,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
             <FormattedMessage id='Microsoft Graph API Reference docs' />
           </a>
         </MessageBar>
-        <Announced message={`${groupedList.samples.length} search results available.`}/>
+        <Announced message={`${groupedList.samples.length} search results available.`} />
         <DetailsList className={classes.queryList}
           cellStyleProps={{
             cellRightPadding: 0,

src/app/views/sidebar/sample-queries/sample-query-utils.ts

@@ -0,0 +1,8 @@
+export function isJsonString(str: string): boolean {
+  try {
+    JSON.parse(str);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}