Merge January 2022 release into dev

.github/workflows/linter.yml

@@ -49,4 +49,4 @@ jobs:
       uses: SonarSource/sonarcloud-github-action@master
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
-        SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+        SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "graph-explorer-v2",
-    "version": "4.14.0",
+    "version": "4.16.0",
     "private": true,
     "dependencies": {
         "@augloop/types-core": "file:packages/types-core-2.16.189.tgz",
@@ -118,6 +118,7 @@
         "@typescript-eslint/eslint-plugin": "4.15.0",
         "@typescript-eslint/eslint-plugin-tslint": "4.33.0",
         "@typescript-eslint/parser": "4.33.0",
+        "acorn": "8.6.0",
         "axe-core": "4.3.3",
         "axe-sarif-converter": "2.3.0",
         "axios": "0.24.0",
@@ -142,6 +143,7 @@
         "react-test-renderer": "16.14.0",
         "redux-logger": "3.0.6",
         "redux-mock-store": "1.5.3",
+        "reusify": "1.0.4",
         "selenium-webdriver": "4.0.0-beta.4",
         "serialize-javascript": "6.0.0",
         "ssri": "8.0.1",
@@ -162,4 +164,4 @@
         "reportFile": "test-report.xml",
         "indent": 4
     }
-}
+}

src/app/middleware/telemetryMiddleware.ts

@@ -1,19 +1,12 @@
 import { SeverityLevel } from '@microsoft/applicationinsights-web';
-import {
-  componentNames,
-  errorTypes,
-  eventTypes,
-  telemetry
-} from '../../telemetry';
+import { componentNames, errorTypes, telemetry } from '../../telemetry';
 import { IAction } from '../../types/action';
 import { IQuery } from '../../types/query-runner';
 import { IRootState } from '../../types/root';
 import {
   FETCH_ADAPTIVE_CARD_ERROR,
   FETCH_SCOPES_ERROR,
   GET_SNIPPET_ERROR,
-  RESOURCEPATHS_ADD_SUCCESS,
-  RESOURCEPATHS_DELETE_SUCCESS,
   SAMPLES_FETCH_ERROR
 } from '../services/redux-constants';
 import { sanitizeQueryUrl } from '../utils/query-url-sanitization';
@@ -62,20 +55,6 @@ const telemetryMiddleware =
         );
         break;
       }
-      case RESOURCEPATHS_ADD_SUCCESS: {
-        telemetry.trackEvent(eventTypes.LISTITEM_CLICK_EVENT, {
-          ComponentName: componentNames.ADD_RESOURCE_TO_COLLECTION_LIST_ITEM,
-          ResourcePath: action.response[0].url
-        });
-        break;
-      }
-      case RESOURCEPATHS_DELETE_SUCCESS: {
-        telemetry.trackEvent(eventTypes.LISTITEM_CLICK_EVENT, {
-          ComponentName: componentNames.REMOVE_RESOURCE_FROM_COLLECTION_BUTTON,
-          ResourceCount: action.response.length
-        });
-        break;
-      }
     }
     return next(action);
   };

src/app/services/redux-constants.ts

@@ -49,4 +49,4 @@ export const GET_POLICY_SUCCESS = 'GET_POLICY_SUCCESS';
 export const GET_POLICY_ERROR = 'GET_POLICY_ERROR';
 export const GET_POLICY_PENDING = 'GET_POLICY_PENDING';
 export const RESOURCEPATHS_ADD_SUCCESS = 'RESOURCEPATHS_ADD_SUCCESS';
-export const RESOURCEPATHS_DELETE_SUCCESS = 'RESOURCEPATHS_DELETE_SUCCESS';
+export const RESOURCEPATHS_DELETE_SUCCESS = 'RESOURCEPATHS_DELETE_SUCCESS';

src/app/utils/download.ts

@@ -0,0 +1,10 @@
+export function downloadToLocal(content: any, filename: string) {
+  const blob = new Blob([JSON.stringify(content, null, 4)], { type: 'text/json' });
+
+  const elem = window.document.createElement('a');
+  elem.href = window.URL.createObjectURL(blob);
+  elem.download = filename;
+  document.body.appendChild(elem);
+  elem.click();
+  document.body.removeChild(elem);
+}

src/app/utils/query-parameter-sanitization.ts

@@ -433,8 +433,7 @@ function sanitizeFilterQueryOptionValue(queryParameterValue: string): string {
         if (!isPropertyName(propertyName)) {
           propertyName = '<property>';
         }
-        sanitizedQueryString += `${queryFunctionPrefix}(${propertyName}${
-          commaIndex > 0 ? ',<value>' : ''
+        sanitizedQueryString += `${queryFunctionPrefix}(${propertyName}${commaIndex > 0 ? ',<value>' : ''
         })`;
       } else {
         sanitizedQueryString += `${queryFunctionPrefix}(<unknown>)`;
@@ -460,8 +459,7 @@ function sanitizeFilterQueryOptionValue(queryParameterValue: string): string {
           COMPARISON_OPERATORS.includes(expectedOperator) ||
           ARITHMETIC_OPERATORS.includes(expectedOperator)
         ) {
-          sanitizedQueryString += `${segment} ${
-            filterSegments[index + 1]
+          sanitizedQueryString += `${segment} ${filterSegments[index + 1]
           } <value>`;
           index += 2;
           continue;

src/app/utils/sample-url-generation.ts

@@ -13,7 +13,7 @@ export function parseSampleUrl(url: string, version?: string) {
       queryVersion = (version) ? version : urlObject.pathname.substring(1, 5);
       search = generateSearchParameters(urlObject, search);
       sampleUrl = `${GRAPH_URL}/${queryVersion}/${requestUrl + search}`;
-    } catch (error:any) {
+    } catch (error: any) {
       if (error.message === 'Failed to construct \'URL\': Invalid URL') {
         return {
           queryVersion, requestUrl, sampleUrl, search
@@ -33,7 +33,7 @@ function generateSearchParameters(urlObject: URL, search: string) {
     try {
       search = decodeURI(searchParameters);
     }
-    catch (error:any) {
+    catch (error: any) {
       if (error.message === 'URI malformed') {
         search = searchParameters;
       }
@@ -42,7 +42,7 @@ function generateSearchParameters(urlObject: URL, search: string) {
   return search;
 }
 
-export function hasWhiteSpace(url: string):boolean {
+export function hasWhiteSpace(url: string): boolean {
   const parts = url.split('?');
   const whitespaceChars = [' ', '\t', '\n', '%20'];
   return whitespaceChars.some(char => parts[0].includes(char));

src/app/utils/status-message.ts

@@ -85,4 +85,4 @@ const httpStatusMessage = new Map([
 export function setStatusMessage(status: number): string {
   const statusMessage = httpStatusMessage.get(status);
   return statusMessage ? statusMessage : '';
-}
+}

src/app/views/common/monaco/util/format-json.ts

@@ -1,14 +1,8 @@
 import { SeverityLevel } from '@microsoft/applicationinsights-web';
 
-import {
-  componentNames,
-  errorTypes,
-  telemetry
-} from '../../../../../telemetry';
+import { componentNames, errorTypes, telemetry } from '../../../../../telemetry';
 
-export function formatJsonStringForAllBrowsers(
-  body: string | object | undefined
-) {
+export function formatJsonStringForAllBrowsers(body: string | object | undefined) {
   /**
    * 1. Remove whitespace, tabs or raw string (Safari related issue)
    * 2. Convert back to javascript object
@@ -22,7 +16,7 @@ export function formatJsonStringForAllBrowsers(
       new Error(errorTypes.OPERATIONAL_ERROR),
       SeverityLevel.Error,
       {
-        ComponentName: componentNames.MONACO_EDITOR_FORMAT_JSON_ACTION,
+        ComponentName: componentNames.MONACO_EDITOR,
         Message: `${error}`
       }
     );

src/app/views/sidebar/history/har-utils.ts

@@ -1,6 +1,6 @@
 import { IHarFormat, IHarHeaders, IHarPayload } from '../../../../types/har';
 import { IHistoryItem } from '../../../../types/history';
-import { downloadToLocal } from '../../common/download';
+import { downloadToLocal } from '../../../utils/download';
 
 export function createHarPayload(query: IHistoryItem): IHarPayload {
   const queryResult = JSON.stringify(query.result);

src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx

@@ -6,7 +6,6 @@ import {
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { telemetry, eventTypes, componentNames } from '../../../../telemetry';
 
 import { IResource, IResourceLink, ResourceOptions } from '../../../../types/resources';
 import { IRootState } from '../../../../types/root';
@@ -140,11 +139,6 @@ const unstyledResourceExplorer = (props: any) => {
     ];
     setItems(tree);
     setIsolated(navLink);
-    telemetry.trackEvent(eventTypes.LISTITEM_CLICK_EVENT,
-      {
-        ComponentName: componentNames.RESOURCES_ISOLATE_QUERY_LIST_ITEM,
-        ResourcePath: getUrlFromLink(navLink)
-      });
   }
 
   const disableIsolation = (): void => {
@@ -174,11 +168,6 @@ const unstyledResourceExplorer = (props: any) => {
         context
       });
       setPanelHeaderText(`${requestUrl}`);
-      telemetry.trackEvent(eventTypes.LISTITEM_CLICK_EVENT,
-        {
-          ComponentName: componentNames.RESOURCES_QUERY_PARAMETERS_LIST_ITEM,
-          ResourcePath: requestUrl
-        });
     }
   }
 

src/app/views/sidebar/resource-explorer/ResourceLink.tsx

@@ -5,7 +5,6 @@ import {
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
-import { telemetry, eventTypes, componentNames } from '../../../../telemetry';
 
 import { IQuery } from '../../../../types/query-runner';
 import { IResourceLink, ResourceOptions } from '../../../../types/resources';
@@ -34,8 +33,7 @@ const ResourceLink = (props: IResourceLinkProps) => {
   };
 
   const setQuery = (link: IResourceLink, selectedVerb: string) => {
-    const resourceUrl = getUrlFromLink(link);
-    const sampleUrl = `${GRAPH_URL}/${version}${resourceUrl}`;
+    const sampleUrl = `${GRAPH_URL}/${version}${getUrlFromLink(link)}`;
     const query: IQuery = {
       selectedVerb,
       selectedVersion: version,
@@ -44,12 +42,6 @@ const ResourceLink = (props: IResourceLinkProps) => {
       sampleBody: undefined
     };
     dispatch(setSampleQuery(query));
-    telemetry.trackEvent(eventTypes.LISTITEM_CLICK_EVENT,
-      {
-        ComponentName: componentNames.RESOURCES_SET_QUERY_LIST_ITEM,
-        SelectedVerb: selectedVerb,
-        ResourcePath: resourceUrl
-      });
   }
 
   const items = getMenuItems();

src/app/views/sidebar/resource-explorer/panels/PathsReview.tsx

@@ -8,8 +8,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import { IResourceLink, IResourceMethod } from '../../../../../types/resources';
 import { IRootState } from '../../../../../types/root';
 import { removeResourcePaths } from '../../../../services/actions/resource-explorer-action-creators';
+import { downloadToLocal } from '../../../../utils/download';
 import { translateMessage } from '../../../../utils/translate-messages';
-import { downloadToLocal } from '../../../common/download';
 import { removeCounter } from '../resource-explorer.utils';
 import Paths from './Paths';
 import { generatePostmanCollection } from './postman.util';

src/telemetry/component-names.ts

@@ -15,16 +15,10 @@ export const VIEW_ALL_PERMISSIONS_BUTTON = 'View all permissions button';
 export const EXPORT_HISTORY_ITEM_BUTTON = 'Export history item button';
 export const DELETE_HISTORY_ITEM_BUTTON = 'Delete history item button';
 export const RESPONSE_HEADERS_COPY_BUTTON = 'Response headers copy button';
-export const DOWNLOAD_POSTMAN_COLLECTION_BUTTON = 'Download postman collection button';
-export const REMOVE_RESOURCE_FROM_COLLECTION_BUTTON = 'Remove resource from collection button';
 
 // List items
 export const HISTORY_LIST_ITEM = 'History list item';
 export const SAMPLE_QUERY_LIST_ITEM = 'Sample query list item';
-export const RESOURCES_SET_QUERY_LIST_ITEM = 'Resources set query list item';
-export const RESOURCES_ISOLATE_QUERY_LIST_ITEM = 'Resources isolate query list item';
-export const RESOURCES_QUERY_PARAMETERS_LIST_ITEM ='Resources query parameters list item';
-export const ADD_RESOURCE_TO_COLLECTION_LIST_ITEM = 'Add resource to collection list item';
 
 // Tabs
 export const HISTORY_TAB = 'History tab';
@@ -47,17 +41,17 @@ export const QUERY_URL_AUTOCOMPLETE_DROPDOWN = 'Query URL autocomplete dropdown'
 
 // Links
 export const DOCUMENTATION_LINK = 'Documentation link';
-export const REPORT_AN_ISSUE_LINK = 'Report an issue link';
 export const OFFICE_DEV_PROGRAM_LINK = 'Office dev program link';
 export const GRAPH_TOOLKIT_PLAYGROUND_LINK = 'Graph toolkit playground link';
 export const MICROSOFT_APIS_TERMS_OF_USE_LINK = 'Microsoft APIs terms of use link';
 export const MICROSOFT_PRIVACY_STATEMENT_LINK = 'Microsoft privacy statement link';
 export const MICROSOFT_GRAPH_API_REFERENCE_DOCS_LINK = 'Microsoft graph API reference docs link';
+export const REPORT_AN_ISSUE_LINK = 'Report an issue link';
 
 // Actions
 export const GET_SNIPPET_ACTION = 'Get snippet action';
 export const FETCH_SAMPLES_ACTION = 'Fetch samples action';
 export const AUTHENTICATION_ACTION = 'Authentication action';
 export const GET_ADAPTIVE_CARD_ACTION = 'Get adaptive card action';
 export const FETCH_PERMISSIONS_ACTION = 'Fetch permissions action';
-export const MONACO_EDITOR_FORMAT_JSON_ACTION = 'Monaco editor format JSON action';
+export const MONACO_EDITOR = 'Monaco editor display';

src/types/adaptivecard.ts

@@ -27,4 +27,4 @@ export interface IAdaptiveCardResponse {
   pending: boolean;
   data?: IAdaptiveCardContent;
   error?: string;
-}
+}