Fix: Persist sample body

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

@@ -1,5 +1,5 @@
 import { IDropdownOption, MessageBarType } from '@fluentui/react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { injectIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
@@ -23,6 +23,14 @@ const QueryRunner = (props: any) => {
 
   const [sampleBody, setSampleBody] = useState('');
 
+  useEffect(() => {
+    if(sampleQuery.selectedVerb !== 'GET') {
+      const query = { ...sampleQuery };
+      query.sampleBody = sampleBody;
+      dispatch(setSampleQuery(query));
+    }
+  }, [sampleBody])
+
   const handleOnMethodChange = (method?: IDropdownOption) => {
     const query = { ...sampleQuery };
     if (method !== undefined) {
@@ -39,7 +47,7 @@ const QueryRunner = (props: any) => {
   };
 
   const handleOnRunQuery = (query?: IQuery) => {
-    if (sampleBody) {
+    if (sampleBody && sampleQuery.selectedVerb !== 'GET') {
       const headers = sampleQuery.sampleHeaders;
       const contentType = headers.find(k => k.name.toLowerCase() === 'content-type');
       if (!contentType || (contentType.value === ContentType.Json)) {
@@ -52,14 +60,14 @@ const QueryRunner = (props: any) => {
             status: `${translateMessage('Review the request body')} ${error}`,
             messageType: MessageBarType.error
           }));
-          setSampleBody('');
           return;
         }
       } else {
         sampleQuery.sampleBody = sampleBody;
       }
     }
-    if(query) {
+
+    if (query) {
       sampleQuery.sampleUrl = query.sampleUrl;
       sampleQuery.selectedVersion = query.selectedVersion;
       sampleQuery.selectedVerb = query.selectedVerb;
@@ -75,7 +83,6 @@ const QueryRunner = (props: any) => {
         QuerySignature: `${sampleQuery.selectedVerb} ${sanitizedUrl}`,
         ...deviceCharacteristics
       });
-    setSampleBody('');
   };
 
   const handleOnVersionChange = (urlVersion?: IDropdownOption) => {

src/tests/ui/anonymous-experiences/request.spec.ts

@@ -117,6 +117,7 @@ test.describe('Run query', () => {
   })
 
   test('Tests query parameter for beta version that do not require a $ sign', async () => {
+    await page.reload();
     const queryInputField = page.locator('[aria-label="Query sample input"]');
     await queryInputField.click();
     await page.evaluate(() => document.fonts.ready);
@@ -242,14 +243,27 @@ test.describe('Run query', () => {
     expect(page.getByText('"Microsoft Viva"')).toBeDefined();
   })
 
+  test('User can add request bodies that persist when switching between tabs', async () => {
+    await page.locator('[aria-label="my profile"]').click();
+    await page.getByRole('tab', { name: 'Request body' }).click();
+    await page.getByRole('tab', { name: 'Request body' }).press('Tab');
+    await page.getByRole('textbox', { name: 'Editor content;Press Alt+F1 for Accessibility Options.' }).fill('{\n\n    "$schema": {}}\n}');
+    await page.getByRole('tab', { name: 'Request headers' }).click();
+    await page.getByRole('tab', { name: 'Request body' }).click();
+    expect(page.getByText('"$schema"')).toBeVisible();
+
+    // Make sure that request body is not there when switching between queries
+    await page.getByRole('gridcell', { name: 'my profile (beta)' }).click();
+    expect(page.getByText('"$schema"')).not.toBeVisible();
+  })
+
   test('should show documentation link for queries with links ', async () => {
+    await page.reload();
     await page.locator('[aria-label="my profile"]').click();
-    await page.locator('[aria-label="More Info"]').click();
-    const [page3] = await Promise.all([
-      page.waitForEvent('popup'),
-      page.locator('button:has-text("Learn more")').click()
-    ]);
-    expect(page3.url().indexOf('https://learn.microsoft.com/')).toBeGreaterThan(-1);
+    const page2Promise = page.waitForEvent('popup');
+    await page.getByRole('button', { name: 'Read documentation' }).click();
+    const page2 = await page2Promise;
+    expect(page2.url().indexOf('https://learn.microsoft.com/')).toBeGreaterThan(-1);
   })
 
   test('should launch the share query dialog when share query button is clicked', async () => {