Task: change sandbox url

package.json

@@ -104,6 +104,7 @@
     "@types/chromedriver": "2.38.0",
     "@types/enzyme": "3.9.0",
     "@types/enzyme-adapter-react-16": "1.0.5",
+    "@types/isomorphic-fetch": "0.0.35",
     "@types/jest": "24.0.6",
     "@types/jwt-decode": "2.2.1",
     "@types/node": "11.9.4",
@@ -145,4 +146,4 @@
     "tslint-react": "4.0.0",
     "yargs-parser": "13.1.2"
   }
-}
+}

src/app/services/actions/proxy-action-creator.ts

@@ -0,0 +1,25 @@
+import { IAction } from '../../../types/action';
+import { GRAPH_API_SANDBOX_ENDPOINT_URL, GRAPH_API_SANDBOX_URL } from '../graph-constants';
+import { SET_GRAPH_PROXY_URL } from '../redux-constants';
+
+export function getGraphProxyUrl(): Function {
+  return async (dispatch: Function) => {
+    try {
+      const response = await fetch(GRAPH_API_SANDBOX_ENDPOINT_URL);
+      if (!response.ok) {
+        throw response;
+      }
+      const res = await response.json();
+      return dispatch(setGraphProxyUrl(res));
+    } catch (error) {
+      return dispatch(setGraphProxyUrl(GRAPH_API_SANDBOX_URL));
+    }
+  };
+}
+
+export function setGraphProxyUrl(response: string): IAction {
+  return {
+    type: SET_GRAPH_PROXY_URL,
+    response,
+  };
+}

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

@@ -10,7 +10,7 @@ import { IQuery } from '../../../types/query-runner';
 import { IRequestOptions } from '../../../types/request';
 import { encodeHashCharacters } from '../../utils/query-url-sanitization';
 import { authProvider, GraphClient } from '../graph-client';
-import { DEFAULT_USER_SCOPES, GRAPH_API_SANDBOX_URL } from '../graph-constants';
+import { DEFAULT_USER_SCOPES } from '../graph-constants';
 import { QUERY_GRAPH_SUCCESS } from '../redux-constants';
 import { queryRunningStatus } from './query-loading-action-creators';
 
@@ -21,18 +21,25 @@ export function queryResponse(response: object): IAction {
   };
 }
 
-export async function anonymousRequest(dispatch: Function, query: IQuery) {
-  const authToken = '{token:https://graph.microsoft.com/}';
-  const escapedUrl = encodeURIComponent(encodeHashCharacters(query));
-  const graphUrl = `${GRAPH_API_SANDBOX_URL}?url=${escapedUrl}`;
+export async function anonymousRequest(dispatch: Function, query: IQuery, getState: Function) {
+  dispatch(queryRunningStatus(true));
+  const { proxyUrl } = getState();
+  const { graphUrl, options } = createAnonymousRequest(query, proxyUrl);
+  return fetch(graphUrl, options);
+}
 
+export function createAnonymousRequest(query: IQuery, proxyUrl: string) {
+  const escapedUrl = encodeURIComponent(query.sampleUrl);
+  const graphUrl = `${proxyUrl}?url=${escapedUrl}`;
   const sampleHeaders: any = {};
+
   if (query.sampleHeaders && query.sampleHeaders.length > 0) {
     query.sampleHeaders.forEach((header) => {
       sampleHeaders[header.name] = header.value;
     });
   }
 
+  const authToken = '{token:https://graph.microsoft.com/}';
   const headers = {
     Authorization: `Bearer ${authToken}`,
     'Content-Type': 'application/json',
@@ -41,10 +48,7 @@ export async function anonymousRequest(dispatch: Function, query: IQuery) {
   };
 
   const options: IRequestOptions = { method: query.selectedVerb, headers };
-
-  dispatch(queryRunningStatus(true));
-
-  return fetch(graphUrl, options);
+  return { graphUrl, options };
 }
 
 export function authenticatedRequest(

src/app/services/actions/query-action-creators.ts

@@ -35,7 +35,7 @@ export function runQuery(query: IQuery): Function {
       });
     }
 
-    return anonymousRequest(dispatch, query).then(async (response: Response) => {
+    return anonymousRequest(dispatch, query, getState).then(async (response: Response) => {
       await processResponse(response, respHeaders, dispatch, createdAt);
     });
   };

src/app/services/graph-constants.ts

@@ -6,6 +6,7 @@ export const AUTH_URL = 'https://login.microsoftonline.com';
 export const DEFAULT_USER_SCOPES = 'openid profile User.Read';
 export const DEVX_API_URL = 'https://graphexplorerapi.azurewebsites.net';
 export const GRAPH_API_SANDBOX_URL = 'https://proxy.apisandbox.msdn.microsoft.com/svc';
+export const GRAPH_API_SANDBOX_ENDPOINT_URL = 'https://cdn.graph.office.net/en-us/graph/api/proxy/endpoint';
 export const HOME_ACCOUNT_KEY = 'fbf1ecbe-27ab-42d7-96d4-3e6b03682ee4';
 export enum ACCOUNT_TYPE {
     AAD = "AAD",

src/app/services/reducers/index.ts

@@ -19,6 +19,7 @@ import { snippets } from './snippet-reducer';
 import { termsOfUse } from './terms-of-use-reducer';
 import { theme } from './theme-reducer';
 import { sidebarProperties } from './toggle-sidebar-reducer';
+import { proxyUrl } from './proxy-url-reducer';
 
 export default combineReducers({
   adaptiveCard,
@@ -31,6 +32,7 @@ export default combineReducers({
   history,
   isLoadingData,
   profile,
+  proxyUrl,
   queryRunnerStatus,
   responseAreaExpanded,
   sampleQuery,

src/app/services/reducers/proxy-url-reducer.ts

@@ -0,0 +1,12 @@
+import { IAction } from '../../../types/action';
+import { GRAPH_API_SANDBOX_URL } from '../graph-constants';
+import { SET_GRAPH_PROXY_URL } from '../redux-constants';
+
+export function proxyUrl(state = GRAPH_API_SANDBOX_URL, action: IAction): any {
+  switch (action.type) {
+    case SET_GRAPH_PROXY_URL:
+      return action.response;
+    default:
+      return state;
+  }
+}

src/app/services/redux-constants.ts

@@ -42,4 +42,5 @@ export const RESIZE_SUCCESS = 'RESIZE_SUCCESS';
 export const RESPONSE_EXPANDED = 'RESPONSE_EXPANDED';
 export const PERMISSIONS_PANEL_OPEN = 'PERMISSIONS_PANEL_OPEN';
 export const AUTHENTICATION_PENDING = 'AUTHENTICATION_PENDING';
+export const SET_GRAPH_PROXY_URL = 'SET_GRAPH_PROXY_URL';
 export const PROFILE_TYPE_SUCCESS = 'PROFILE_TYPE_SUCCESS';

src/index.tsx

@@ -17,8 +17,10 @@ import { Provider } from 'react-redux';
 import { getAuthTokenSuccess, getConsentedScopesSuccess } from './app/services/actions/auth-action-creators';
 import { setDevxApiUrl } from './app/services/actions/devxApi-action-creators';
 import { setGraphExplorerMode } from './app/services/actions/explorer-mode-action-creator';
+import { getGraphProxyUrl } from './app/services/actions/proxy-action-creator';
 import { addHistoryItem } from './app/services/actions/request-history-action-creators';
 import { changeThemeSuccess } from './app/services/actions/theme-action-creator';
+import { GRAPH_API_SANDBOX_URL } from './app/services/graph-constants';
 import { isValidHttpsUrl } from './app/utils/external-link-validation';
 import App from './app/views/App';
 import { readHistoryData } from './app/views/sidebar/history/history-utils';
@@ -67,9 +69,11 @@ const appState: any = store({
   },
   termsOfUse: true,
   theme: currentTheme,
-
+  proxyUrl: GRAPH_API_SANDBOX_URL
 });
 
+appState.dispatch(getGraphProxyUrl());
+
 function refreshAccessToken() {
   authenticationWrapper.getToken().then((authResponse: AuthenticationResult) => {
     if (authResponse && authResponse.accessToken) {

src/telemetry/filters.ts

@@ -1,15 +1,16 @@
 import { ITelemetryItem } from '@microsoft/applicationinsights-web';
 import { errorTypes } from '.';
 import {
+  ADAPTIVE_CARD_URL,
   DEVX_API_URL,
+  GRAPH_API_SANDBOX_ENDPOINT_URL,
   GRAPH_API_SANDBOX_URL,
   GRAPH_URL,
-  HOME_ACCOUNT_KEY,
-  ADAPTIVE_CARD_URL,
+  HOME_ACCOUNT_KEY
 } from '../app/services/graph-constants';
 import {
   sanitizeGraphAPISandboxUrl,
-  sanitizeQueryUrl,
+  sanitizeQueryUrl
 } from '../app/utils/query-url-sanitization';
 
 export function filterTelemetryTypes(envelope: ITelemetryItem) {
@@ -30,11 +31,12 @@ export function filterRemoteDependencyData(envelope: ITelemetryItem): boolean {
     const urlObject = new URL(baseData.target || '');
 
     const targetsToInclude = [
-      GRAPH_URL,
+      GRAPH_URL, DEVX_API_URL, GRAPH_API_SANDBOX_URL, GRAPH_API_SANDBOX_ENDPOINT_URL,
       DEVX_API_URL,
       new URL(GRAPH_API_SANDBOX_URL).origin,
       new URL(ADAPTIVE_CARD_URL).origin,
     ];
+
     if (!targetsToInclude.includes(urlObject.origin)) {
       return false;
     }

src/tests/utils/proxy-url.spec.ts

@@ -0,0 +1,48 @@
+import { GRAPH_API_SANDBOX_ENDPOINT_URL, GRAPH_API_SANDBOX_URL } from "../../app/services/graph-constants";
+import fetch from "isomorphic-fetch";
+import { isValidHttpsUrl } from "../../app/utils/external-link-validation";
+import { createAnonymousRequest } from "../../app/services/actions/query-action-creator-util";
+import { IQuery } from "../../types/query-runner";
+
+describe('Sandbox api fetch should', () => {
+
+  test('return valid url', async () => {
+    const res = await fetch(GRAPH_API_SANDBOX_ENDPOINT_URL);
+    const proxyUrl = await res.json();
+    expect(isValidHttpsUrl(proxyUrl)).toBe(true);  // Success!
+  });
+
+  test('return valid url and use to make call to proxy', async () => {
+    const res = await fetch(GRAPH_API_SANDBOX_ENDPOINT_URL);
+    const proxyUrl = await res.json();
+
+    const query: IQuery = {
+      sampleUrl: 'https://graph.microsoft.com/v1.0/me',
+      sampleHeaders: [],
+      selectedVerb: 'GET',
+      selectedVersion: 'v1.0',
+      sampleBody: ''
+    }
+
+    const { graphUrl, options } = createAnonymousRequest(query, proxyUrl);
+    const response = await fetch(graphUrl, options);
+    expect(response.ok).toBe(true);
+  });
+
+  test('use old endpoint to make call to proxy', async () => {
+    const proxyUrl = GRAPH_API_SANDBOX_URL;
+
+    const query: IQuery = {
+      sampleUrl: 'https://graph.microsoft.com/v1.0/me',
+      sampleHeaders: [],
+      selectedVerb: 'GET',
+      selectedVersion: 'v1.0',
+      sampleBody: ''
+    }
+
+    const { graphUrl, options } = createAnonymousRequest(query, proxyUrl);
+    const response = await fetch(graphUrl, options);
+    expect(response.ok).toBe(true);
+  });
+
+});