Update messages to mention workaround is used because redirected down…

…load URL is not CORS compliant
microsoftgraph · Sep 20, 2021 · 223aea2 · 223aea2
1 parent 155fe48
commit 223aea2
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 18 deletions.
diff --git a/src/app/services/graph-constants.ts b/src/app/services/graph-constants.ts
@@ -22,3 +22,5 @@ export enum PERMS_SCOPE {
 export const ADAPTIVE_CARD_URL =
   'https://templates.adaptivecards.io/graph.microsoft.com';
 export const GRAPH_TOOOLKIT_EXAMPLE_URL = 'https://mgt.dev/?path=/story';
+export const ONE_DRIVE_CONTENT_DOWNLOAD_DOCUMENTATION_LINK =
+  'https://docs.microsoft.com/en-us/onedrive/developer/rest-api/concepts/working-with-cors#downloading-onedrive-files-in-javascript-apps';
diff --git a/src/app/views/app-sections/ResponseMessages.tsx b/src/app/views/app-sections/ResponseMessages.tsx
@@ -6,6 +6,7 @@ import { IGraphResponse } from '../../../types/query-response';
 import { IQuery } from '../../../types/query-runner';
 import { runQuery } from '../../services/actions/query-action-creators';
 import { setSampleQuery } from '../../services/actions/query-input-action-creators';
+import { ONE_DRIVE_CONTENT_DOWNLOAD_DOCUMENTATION_LINK } from '../../services/graph-constants';
 
 interface ODataLink {
   link: string;
@@ -40,6 +41,7 @@ export function responseMessages(graphResponse: IGraphResponse, sampleQuery: IQu
     dispatch(runQuery(query));
   }
 
+  // Display link to step to next result
   if (odataLink) {
     return (
       <MessageBar messageBarType={MessageBarType.info}>
@@ -51,19 +53,33 @@ export function responseMessages(graphResponse: IGraphResponse, sampleQuery: IQu
     );
   }
 
+  // Display link to downlod file response
   if (body?.contentDownloadUrl) {
-    const workaroundQueries = {
-      oneDrive: `await client.api('/drive/items/{item-id}').get().select('content.downloadUrl')`
-    };
     return (
-      <MessageBar messageBarType={MessageBarType.warning}>
-        <FormattedMessage id={`This response contains unviewable content`}/>&nbsp;
-        <Link href={body?.contentDownloadUrl} download>
-            <FormattedMessage id={`Click here to download`}/>
-        </Link>&nbsp;
-        {body?.isWorkaround == true && <div><FormattedMessage id={`Response is result of workaround`}/> {workaroundQueries.oneDrive} </div>}
-        {body?.isOriginalFormat == false && <div><FormattedMessage id={`File response is available in original format only`}/></div>}&nbsp;
-      </MessageBar>
-    );
+      <div>
+        <MessageBar messageBarType={MessageBarType.info}>
+          <FormattedMessage id={`This response contains unviewable content`}/>
+          <Link href={body?.contentDownloadUrl} download>
+              <FormattedMessage id={`Click to download file`}/>
+          </Link>&nbsp;
+        </MessageBar>
+        {body?.isWorkaround == true &&
+          <MessageBar messageBarType={MessageBarType.warning}>
+            <FormattedMessage id={`Response is result of workaround`}/>
+            {body?.isOriginalFormat == false &&
+              <span>
+                &nbsp;
+                <FormattedMessage id={`File response is available in original format only`}/>
+              </span>
+            }
+            &nbsp;
+            <FormattedMessage id={`For more information`}/>
+            <Link href={ONE_DRIVE_CONTENT_DOWNLOAD_DOCUMENTATION_LINK} target='_blank'>
+              <FormattedMessage id={`documentation`}/>.
+            </Link>
+          </MessageBar>
+        }
+      </div>
+      );
   }
 }
diff --git a/src/app/views/query-response/headers/ResponseHeaders.tsx b/src/app/views/query-response/headers/ResponseHeaders.tsx
@@ -17,7 +17,7 @@ const ResponseHeaders = () => {
 
   const height = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 100);
 
-  const responseIsDownloadUrl = body['contentDownloadUrl'];
+  const responseIsDownloadUrl = body?.contentDownloadUrl;
   if (!headers && responseIsDownloadUrl) {
     return (
       <MessageBar messageBarType={MessageBarType.warning}>

diff --git a/src/app/views/query-response/response/Response.tsx b/src/app/views/query-response/response/Response.tsx
@@ -20,7 +20,8 @@ const Response = () => {
   return (
     <div style={{ display: 'block' }}>
       {responseMessages(graphResponse, sampleQuery, dispatch)}
-      {headers && <ResponseDisplay
+      {headers &&
+      <ResponseDisplay
         contentType={contentType}
         body={!contentDownloadUrl && body}
         height={height}

diff --git a/src/messages/GE.json b/src/messages/GE.json
@@ -380,8 +380,10 @@
   "user_cancelled_consent": "Please wait for the consent process to finish.",
   "access_denied_consent": "Your consent to this permission has been blocked by your tenant admin. Ask your admin to grant you access and then try again.",
   "This response contains unviewable content": "This response contains content that may not be viewable on this editor.",
-  "Click here to download": "Click here to download.",
-  "File response is available in original format only": "The file response is only available in the original format due to limitations of the Javascipt SDK.",
-  "Response is result of workaround": "A workaround has been used to fetch the download URL by using an alternate query: ",
-  "Missing response headers for query workaround": "Some headers, typically returned for this request, may be missing due to limitations of the Javascript SDK."
+  "Click to download file": "Click to download file.",
+  "File response is available in original format only": "Due to the limitations of the workaround, the file is only available in its original format.",
+  "Response is result of workaround": "An alternative query has been used to fetch the download URL since the redirected URL from the original request is not CORS-compliant.",
+  "For more information": "For more information, see",
+  "documentation": "documentation",
+  "Missing response headers for query workaround": "Some headers, typically returned for this request, may be missing due to the limitations of the workaround."
 }