Fix: Autocomplete filter (#2432)

microsoftgraph · Mar 9, 2023 · bd1076b · bd1076b
1 parent 8194c37
commit bd1076b
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 29 deletions.
diff --git a/src/app/views/query-runner/QueryRunner.tsx b/src/app/views/query-runner/QueryRunner.tsx
@@ -6,6 +6,7 @@ import { useDispatch } from 'react-redux';
 import { AppDispatch, useAppSelector } from '../../../store';
 import { componentNames, eventTypes, telemetry } from '../../../telemetry';
 import { ContentType } from '../../../types/enums';
+import { IQuery } from '../../../types/query-runner';
 import { runQuery } from '../../services/actions/query-action-creators';
 import { setSampleQuery } from '../../services/actions/query-input-action-creators';
 import { setQueryResponseStatus } from '../../services/actions/query-status-action-creator';
@@ -37,7 +38,7 @@ const QueryRunner = (props: any) => {
     setSampleBody(value!);
   };
 
-  const handleOnRunQuery = () => {
+  const handleOnRunQuery = (query?: IQuery) => {
     if (sampleBody) {
       const headers = sampleQuery.sampleHeaders;
       const contentType = headers.find(k => k.name.toLowerCase() === 'content-type');
@@ -58,6 +59,11 @@ const QueryRunner = (props: any) => {
         sampleQuery.sampleBody = sampleBody;
       }
     }
+    if(query) {
+      sampleQuery.sampleUrl = query.sampleUrl;
+      sampleQuery.selectedVersion = query.selectedVersion;
+      sampleQuery.selectedVerb = query.selectedVerb;
+    }
 
     dispatch(runQuery(sampleQuery));
     const sanitizedUrl = sanitizeQueryUrl(sampleQuery.sampleUrl);

diff --git a/src/app/views/query-runner/query-input/QueryInput.tsx b/src/app/views/query-runner/query-input/QueryInput.tsx
@@ -60,11 +60,15 @@ const QueryInput = (props: IQueryInputProps) => {
     return query;
   }
 
-  const runQuery = () => {
-    if (!sampleQuery.sampleUrl || sampleQuery.sampleUrl.indexOf('graph.microsoft.com') === -1) {
+  const runQuery = (queryUrl?: string) => {
+    let query: IQuery = sampleQuery;
+    if (queryUrl) {
+      query = getChangedQueryContent(queryUrl);
+    }
+    if (!query.sampleUrl || query.sampleUrl.indexOf('graph.microsoft.com') === -1) {
       return;
     }
-    handleOnRunQuery(sampleQuery);
+    handleOnRunQuery(query);
   };
 
   const queryInputStackTokens: IStackTokens = {

diff --git a/src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx b/src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx
@@ -105,7 +105,7 @@ const AutoComplete = (props: IAutoCompleteProps) => {
           appendSuggestionToUrl(selected);
         } else {
           props.contentChanged(queryUrl);
-          props.runQuery();
+          props.runQuery(queryUrl);
         }
         break;
 
@@ -200,10 +200,6 @@ const AutoComplete = (props: IAutoCompleteProps) => {
     if (filtered.length === 1 && filtered[0] === searchTerm) {
       appendSuggestionToUrl(searchTerm);
     }
-
-    if(filtered.length === 0){
-      props.contentChanged(queryUrl);
-    }
   }
 
   const trackSuggestionSelectionEvent = (suggestion: string) => {
@@ -220,6 +216,9 @@ const AutoComplete = (props: IAutoCompleteProps) => {
 
     let query = selected;
     if (selected.startsWith(delimiters.DOLLAR.symbol)) {
+      if(queryUrl.includes(delimiters.DOLLAR.symbol)){
+        selected = selected.substring(1, selected.length);
+      }
       selected += delimiters.EQUALS.symbol;
       query = '';
     }

diff --git a/src/modules/suggestions/utilities/delimiters.ts b/src/modules/suggestions/utilities/delimiters.ts
@@ -25,26 +25,16 @@ const delimiters: Delimiters = {
 };
 
 function getLastDelimiterInUrl(url: string): Delimiter {
-  const symbols = Object.values(delimiters);
-  symbols.forEach(key => {
-    const prevCharIndex = url.lastIndexOf(key.symbol) - 1;
-    key.index = isSecondLastCharADelimiter(url.charAt(prevCharIndex)) ? url.lastIndexOf(key.symbol)-1 :
-      url.lastIndexOf(key.symbol);
-  });
-
-  return symbols.reduce((prev, current) => (prev.index > current.index) ? prev : current);
-}
-
-const isSecondLastCharADelimiter = (prevCharacter: string): boolean => {
-  const symbols = Object.values(delimiters);
-  let isSecondLastCharDelimiter = false;
-  for(const symbol of symbols ){
-    if(prevCharacter === symbol.symbol){
-      isSecondLastCharDelimiter = true;
-      break;
+  const symbols: Delimiter[] = Object.values(delimiters);
+  for (let i = url.length - 1; i >= 0; i--) {
+    const symbol = symbols.find((s) => s.symbol === url[i]);
+    if (symbol) {
+      symbol.index = i;
+      return symbol;
     }
   }
-  return isSecondLastCharDelimiter;
+  return delimiters.SLASH;
 }
 
+
 export { delimiters, getLastDelimiterInUrl }
diff --git a/src/tests/ui/anonymous-experiences/request.spec.ts b/src/tests/ui/anonymous-experiences/request.spec.ts
@@ -75,19 +75,60 @@ test.describe('Run query', () => {
     await page.locator('label:has-text("messages")').click();
     await page.evaluate(() => document.fonts.ready);
     expect(await page.screenshot({ clip: { x: 300, y: 0, width: 1920, height: 1080 } })).toMatchSnapshot();
-    await queryInputField.type('?sel');
+    await queryInputField.type('?$sel');
     await page.locator('label:has-text("$select")').click();
     await page.evaluate(() => document.fonts.ready);
     expect(await page.screenshot({ clip: { x: 300, y: 0, width: 1920, height: 1080 } })).toMatchSnapshot();
     await queryInputField.press('Tab');
     await queryInputField.press('Tab');
     await page.evaluate(() => document.fonts.ready);
     expect(await page.screenshot({ clip: { x: 300, y: 0, width: 1920, height: 1080 } })).toMatchSnapshot();
-
     // eslint-disable-next-line max-len
     expect('input[aria-label="Query sample input"]:has-text("https://graph.microsoft.com/v1.0/me/messages?$select=id")').toBeDefined()
   });
 
+  test('Tests query parameter addition on autocomplete', async () => {
+    const queryInputField = page.locator('[aria-label="Query sample input"]');
+    await queryInputField.click();
+    await page.evaluate(() => document.fonts.ready);
+    await queryInputField.fill('');
+    await queryInputField.fill('https://graph.microsoft.com/v1.0/me/messages');
+    await queryInputField.type('?sel');
+    await page.locator('label:has-text("$select")').click();
+    await page.evaluate(() => document.fonts.ready);
+    await queryInputField.press('Tab');
+    await queryInputField.press('Tab');
+    expect('input[aria-label="Query sample input"]:has-text("https://graph.microsoft.com/v1.0/me/messages?$select=id")').toBeDefined()
+  })
+
+  test('Tests $filter query parameter for v1 version', async () => {
+    const queryInputField = page.locator('[aria-label="Query sample input"]');
+    await queryInputField.click();
+    await page.evaluate(() => document.fonts.ready);
+    await queryInputField.fill('');
+    await queryInputField.fill('https://graph.microsoft.com/v1.0/users');
+    await queryInputField.type('?fil');
+    await page.locator('label:has-text("$filter")').click();
+    await page.evaluate(() => document.fonts.ready);
+    await queryInputField.press('Tab');
+    await queryInputField.press('Tab');
+    await queryInputField.type('startsWith(displayName, \'Megan\')');
+    expect('input[aria-label="Query sample input"]:has-text("https://graph.microsoft.com/v1.0/users?$filter=startsWith(displayName, \'Megan\')")').toBeDefined();
+  })
+
+  test('Tests query parameter for beta version that do not require a $ sign', async () => {
+    const queryInputField = page.locator('[aria-label="Query sample input"]');
+    await queryInputField.click();
+    await page.evaluate(() => document.fonts.ready);
+    await queryInputField.fill('');
+    await queryInputField.fill('https://graph.microsoft.com/beta/me/messages');
+    await queryInputField.type('?select=id,sender');
+    const runQueryButton = page.locator('.run-query-button button');
+    await runQueryButton.click();
+    expect('input[aria-label="Query sample input"]:has-text("https://graph.microsoft.com/beta/me/messages?select=id,sender")').toBeDefined();
+    expect(page.getByText('"Microsoft Viva"')).toBeDefined();
+  })
+
   test('user can run query', async () => {
     const profileSample = page.locator('[aria-label="my profile"]');
     await profileSample.click();
@@ -103,6 +144,24 @@ test.describe('Run query', () => {
     expect(messageBar).toBeDefined();
   });
 
+  test('User can run query using the Enter key and different results are received for different queries', async () => {
+    const queryInputField = page.locator('[aria-label="Query sample input"]');
+    await queryInputField.click();
+    await page.evaluate(() => document.fonts.ready);
+    await queryInputField.fill('');
+    await queryInputField.fill('https://graph.microsoft.com/v1.0/me');
+    await queryInputField.press('Enter');
+    await page.waitForTimeout(100);
+    await page.evaluate(() => document.fonts.ready);
+    expect(page.getByText('"Megan Bowen"')).toBeDefined();
+    await queryInputField.fill('');
+    await queryInputField.fill('https://graph.microsoft.com/v1.0/me/messages?$select=sender');
+    await queryInputField.press('Enter');
+    await page.waitForTimeout(100);
+    await page.evaluate(() => document.fonts.ready);
+    expect(page.getByText('"Microsoft Viva"')).toBeDefined();
+  })
+
   test('should show documentation link for queries with links ', async () => {
     await page.locator('[aria-label="my profile"]').click();
     await page.locator('[aria-label="More Info"]').click();