Fix: try it interaction (#1185)

src/app/views/App.tsx

@@ -395,7 +395,7 @@ class App extends Component<IAppProps, IAppState> {
                   <div style={{ marginBottom: 8 }}>
                     <QueryRunner onSelectVerb={this.handleSelectVerb} />
                   </div>
-                  <div style={ mobileScreen ? this.statusAreaMobileStyle : this.statusAreaLaptopStyle}>
+                  <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaLaptopStyle}>
                     {statusMessages(queryState, sampleQuery, actions)}
                     {termsOfUseMessage(termsOfUse, actions, classes, geLocale)}
                   </div>

src/app/views/query-runner/util/iframe-message-parser.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import { parse } from './iframe-message-parser';
 
 describe('Iframe Message Parser', () => {
@@ -38,4 +39,35 @@ Prefer: A-timezone
       body: '{ "name": "Volunteer" } '
     });
   });
+
+  it('parses http request snippet  "Use $search and OData cast to get membership in groups with display names that contain the letters "tier" including a count of returned objects" correctly', () => {
+    const message = `GET https://graph.microsoft.com/v1.0/users/{id}/memberOf/microsoft.graph.group?$count=true&$orderby=displayName&$search="displayName:tier"&$select=displayName,id
+ConsistencyLevel: eventual`;
+
+    const parsed = parse(message);
+    expect(parsed).toEqual({
+      verb: 'GET',
+      url: 'https://graph.microsoft.com/v1.0/users/{id}/memberOf/microsoft.graph.group?$count=true&$orderby=displayName&$search="displayName:tier"&$select=displayName,id',
+      headers: [
+        { 'ConsistencyLevel': 'eventual' }
+      ],
+      body: ''
+    });
+  });
+
+  it('parses http request snippet  "cast to get groups with a display name that starts with "a" correctly', () => {
+    const message = `GET https://graph.microsoft.com/v1.0/users/{id}/memberOf/microsoft.graph.group?$count=true&$orderby=displayName&$filter=startswith(displayName, 'a')
+ConsistencyLevel: eventual`;
+
+    const parsed = parse(message);
+    expect(parsed).toEqual({
+      verb: 'GET',
+      // eslint-disable-next-line quotes
+      url: `https://graph.microsoft.com/v1.0/users/{id}/memberOf/microsoft.graph.group?$count=true&$orderby=displayName&$filter=startswith(displayName, 'a')`,
+      headers: [
+        { 'ConsistencyLevel': 'eventual' }
+      ],
+      body: ''
+    });
+  });
 });

src/app/views/query-runner/util/iframe-message-parser.ts

@@ -118,13 +118,12 @@ function extractUrl(payload: string): object[] {
   // of the resulting array
   const sampleUrl = payload.split('\n')[1];
 
-
   // The sampleUrl has the format VERB URL, after splitting it on the space character the VERB will be at index 0
   // and the URL at index 1
   const urlParts = sampleUrl.split(' ');
   const verb = urlParts[0];
-  let url = urlParts[1];
-
+  let url = (urlParts.length > 2) ?
+    sampleUrl.replace(`${verb} `, '') : urlParts[1];
 
   let sampleDomain = '';
   domains.forEach(domain => {