Fix: hanging run query button (#1445)

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

@@ -12,7 +12,9 @@ import { ContentType } from '../../../types/enums';
 import { IQuery } from '../../../types/query-runner';
 import { IRequestOptions } from '../../../types/request';
 import { IStatus } from '../../../types/status';
+import { ClientError } from '../../utils/ClientError';
 import { encodeHashCharacters } from '../../utils/query-url-sanitization';
+import { translateMessage } from '../../utils/translate-messages';
 import { authProvider, GraphClient } from '../graph-client';
 import { DEFAULT_USER_SCOPES } from '../graph-constants';
 import { QUERY_GRAPH_SUCCESS } from '../redux-constants';
@@ -33,7 +35,11 @@ export async function anonymousRequest(
  const { proxyUrl, queryRunnerStatus } = getState();
  const { graphUrl, options } = createAnonymousRequest(query, proxyUrl, queryRunnerStatus);
  dispatch(queryRunningStatus(true));
- return fetch(graphUrl, options);
+ return fetch(graphUrl, options)
+ .catch(() => {
+ throw new ClientError({ error: translateMessage('Could not connect to the sandbox') });
+ })
+ .then((response) => { return response; });
 }
 
 export function createAnonymousRequest(query: IQuery, proxyUrl: string, queryRunnerStatus: IStatus) {

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

@@ -4,6 +4,7 @@ import { ContentType } from '../../../types/enums';
 import { IHistoryItem } from '../../../types/history';
 import { IQuery } from '../../../types/query-runner';
 import { IStatus } from '../../../types/status';
+import { ClientError } from '../../utils/ClientError';
 import { sanitizeQueryUrl } from '../../utils/query-url-sanitization';
 import { parseSampleUrl } from '../../utils/sample-url-generation';
 import { setStatusMessage } from '../../utils/status-message';
@@ -35,46 +36,30 @@ export function runQuery(query: IQuery): Function {
  respHeaders,
  dispatch,
  createdAt,
- tokenPresent
- );
- })
- .catch(async (error: any) => {
- dispatch(
- queryResponse({
- body: error,
- headers: null
- })
- );
- return dispatch(
- setQueryResponseStatus({
- messageType: MessageBarType.error,
- ok: false,
- status: 400,
- statusText: 'Bad Request'
- })
  );
  });
  }
 
- return anonymousRequest(dispatch, query, getState).then(
- async (response: Response) => {
- await processResponse(
- response,
- respHeaders,
- dispatch,
- createdAt,
- tokenPresent
- );
- }
- );
+ return anonymousRequest(dispatch, query, getState)
+ .then(
+ async (response: Response) => {
+ await processResponse(
+ response,
+ respHeaders,
+ dispatch,
+ createdAt,
+ );
+ }
+ ).catch(async (error: any) => {
+ return handleError(dispatch, error);
+ });
  };
 
  async function processResponse(
  response: Response,
  respHeaders: any,
  dispatch: Function,
  createdAt: any,
- tokenPresent: boolean
  ) {
  let result = await parseResponse(response, respHeaders);
  const duration = new Date().getTime() - new Date(createdAt).getTime();
@@ -149,6 +134,33 @@ export function runQuery(query: IQuery): Function {
  }
 }
 
+function handleError(dispatch: Function, error: any) {
+ dispatch(
+ queryResponse({
+ body: error,
+ headers: null
+ })
+ );
+ if (error instanceof ClientError) {
+ return dispatch(
+ setQueryResponseStatus({
+ messageType: MessageBarType.error,
+ ok: false,
+ status: 0,
+ statusText: error
+ })
+ );
+ }
+ return dispatch(
+ setQueryResponseStatus({
+ messageType: MessageBarType.error,
+ ok: false,
+ status: 400,
+ statusText: 'Bad Request'
+ })
+ );
+}
+
 async function createHistory(
  response: Response,
  respHeaders: any,

src/app/utils/ClientError.ts

@@ -0,0 +1,11 @@
+interface IMetaInfo {
+ error: string;
+}
+
+export class ClientError extends Error {
+ constructor(meta: IMetaInfo = { error: '' }) {
+ super(meta.error);
+ Object.assign(this, meta);
+ this.name = 'Client Error';
+ }
+}

src/messages/GE.json

@@ -429,5 +429,6 @@
  "Response content not available due to CORS policy": "The response content is not available in Graph Explorer due to CORS policy. You can execute this request in an API client, like Postman. Read more about CORS and understand how it works",
  "here": "here",
  "Invalid version in URL": "Invalid version in URL",
- "More info": "More info"
-}
+ "More info": "More info",
+ "Could not connect to the sandbox": "Could not connect to the sandbox"
+}