Merge branch 'main' into feat-sequence-id

microsoft · Apr 7, 2022 · dc12441 · dc12441
2 parents 81881be + 6a5359f
commit dc12441
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixed
 
 -  Fixes [#4102](https://github.com/microsoft/BotFramework-WebChat/issues/4102). Fixed `cldr-data-downloader` package not working properly on Windows, by [@compulim](https://github.com/compulim) in PR [#4223](https://github.com/microsoft/BotFramework-WebChat/pull/4223)
+-  Fixes [#4232](https://github.com/microsoft/BotFramework-WebChat/issues/4232). Added `blob:` to allowed protocol list for file attachment UI (`<FileContent>`), by [@compulim](https://github.com/compulim) in PR [#4233](https://github.com/microsoft/BotFramework-WebChat/pull/4233)
 -  Fixes [#4204](https://github.com/microsoft/BotFramework-WebChat/issues/4204). Sort using `activity.channelData['webchat:sequence-id']` and fallback to epoch time of `activity.timestamp`, by [@compulim](https://github.com/compulim), in PR [#4203](https://github.com/microsoft/BotFramework-WebChat/pull/4203)
 
 ### Changed

diff --git a/...ent-blob-url-js-file-attachment-with-blob-url-should-be-downloadable-1-snap.png b/...ent-blob-url-js-file-attachment-with-blob-url-should-be-downloadable-1-snap.png
diff --git a/__tests__/html/attachment.fileContent.blobURL.html b/__tests__/html/attachment.fileContent.blobURL.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      run(async function () {
+        const {
+          Components: { Composer, FileContent }
+        } = WebChat;
+
+        // TODO: [P2] #2869 When the "DLJS patching code" is being moved to DLJS, we should use standard Web Chat setup, instead of composition mode.
+        // SETUP: Web Chat using composition mode because the logic which talk to DLJS will strip out blob:// URL.
+        ReactDOM.render(
+          React.createElement(
+            Composer,
+            {
+              directLine: testHelpers.createDirectLineWithTranscript(),
+              store: testHelpers.createStore()
+            },
+            React.createElement(FileContent, {
+              fileName: 'blob.txt',
+              href: URL.createObjectURL(new Blob())
+            })
+          ),
+          document.getElementById('webchat')
+        );
+
+        // WHEN: <FileContent href="blob:http://..." /> is being displayed.
+        await pageConditions.uiConnected();
+
+        // THEN: The attachment should have a download icon which means the attachment is downloadable.
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/attachment.fileContent.blobURL.js b/__tests__/html/attachment.fileContent.blobURL.js
@@ -0,0 +1,3 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+test('File attachment with blob URL should be downloadable', () => runHTML('attachment.fileContent.blobURL.html'));
diff --git a/packages/component/src/Attachment/FileContent.tsx b/packages/component/src/Attachment/FileContent.tsx
@@ -24,7 +24,7 @@ const ROOT_STYLE = {
   }
 };
 
-const ALLOWED_PROTOCOLS = ['data:', 'http:', 'https:'];
+const ALLOWED_PROTOCOLS = ['blob:', 'data:', 'http:', 'https:'];
 
 function isAllowedProtocol(url) {
   try {

diff --git a/samples/01.getting-started/g.hybrid-react-npm/packages/chat-component/package-lock.json b/samples/01.getting-started/g.hybrid-react-npm/packages/chat-component/package-lock.json