Move Adaptive Cards to bundle (#1936)

* Move Adaptive Cards to bundle * Update CHANGELOG.md
microsoft · May 6, 2019 · 2948e96 · 2948e96
1 parent 2c5b7aa
commit 2948e96
Show file tree

Hide file tree

Showing 28 changed files with 128 additions and 96 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -41,6 +41,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fix [#1945](https://github.com/Microsoft/BotFramework-WebChat/issues/1945). QA fixes for 4.4, by [@corinagum](https://github.com/johndoe) in PR [#1950](https://github.com/Microsoft/BotFramework-WebChat/pull/1950)
 - Fix [#1947](https://github.com/Microsoft/BotFramework-WebChat/issues/1947). Fix scrollbar in suggested action should be hidden in Firefox, remove gaps, and use style set for customizing `react-film`, by [@compulim](https://github.com/compulim) in PR [#1953](https://github.com/Microsoft/BotFramework-WebChat/pull/1953)
 - Fix [#1948](https://github.com/Microsoft/BotFramework-WebChat/issues/1948). Fixed sample 17.chat-send-history to work with Firefox and Edge, by [@tdurnford](https://github.com/tdurnford) in PR [#1956](https://github.com/Microsoft/BotFramework-WebChat/pull/1956)
+- Fix [#1304](https://github.com/Microsoft/BotFramework-WebChat/issues/1304). Move Adaptive Cards from component to bundle, by [@compulim](https://github.com/compulim) and [@corinagum](https://github.com/corinagum) in PR [#1936](https://github.com/Microsoft/BotFramework-WebChat/pull/1936)
 
 ### Changed
 - Deployment: Bumps to [`[email protected]`](https://github.com/azure/blobxfer/), by [@compulim](https://github.com/compulim), in PR [#1897](https://github.com/Microsoft/BotFramework-WebChat/pull/1897)

diff --git a/__tests__/cardActionMiddleware.js b/__tests__/cardActionMiddleware.js
@@ -67,6 +67,7 @@ test('card action "signin"', async () => {
   await driver.wait(uiConnected(), timeouts.directLine);
   await pageObjects.sendMessageViaSendBox('oauth', { waitForSend: true });
 
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
   const openUrlButton = await driver.findElement(By.css('[role="log"] ul > li button'));
 
   await openUrlButton.click();

diff --git a/packages/bundle/.babelrc b/packages/bundle/.babelrc
@@ -7,6 +7,7 @@
     }
   },
   "plugins": [
+    "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-object-rest-spread",
     "@babel/plugin-transform-runtime",
     "babel-plugin-version-transform"

diff --git a/packages/bundle/package-lock.json b/packages/bundle/package-lock.json
diff --git a/packages/bundle/package.json b/packages/bundle/package.json
@@ -51,6 +51,7 @@
   "devDependencies": {
     "@babel/cli": "^7.4.3",
     "@babel/core": "^7.4.3",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
     "@babel/plugin-transform-runtime": "^7.4.3",
     "@babel/preset-env": "^7.4.3",

diff --git a/packages/bundle/src/FullReactWebChat.js b/packages/bundle/src/FullReactWebChat.js
@@ -2,7 +2,9 @@ import * as adaptiveCards from 'adaptivecards';
 import memoize from 'memoize-one';
 import React from 'react';
 
-import BasicWebChat, { createAdaptiveCardsAttachmentMiddleware, concatMiddleware } from 'botframework-webchat-component';
+import BasicWebChat, { concatMiddleware } from 'botframework-webchat-component';
+
+import createAdaptiveCardsAttachmentMiddleware from './adaptiveCards/createAdaptiveCardMiddleware';
 
 import renderMarkdown from './renderMarkdown';
 

diff --git a/.../src/Attachment/AdaptiveCardAttachment.js → ...ards/Attachment/AdaptiveCardAttachment.js b/.../src/Attachment/AdaptiveCardAttachment.js → ...ards/Attachment/AdaptiveCardAttachment.js
diff --git a/...omponent/src/Utils/AdaptiveCardBuilder.ts → ...veCards/Attachment/AdaptiveCardBuilder.ts b/...omponent/src/Utils/AdaptiveCardBuilder.ts → ...veCards/Attachment/AdaptiveCardBuilder.ts
@@ -49,7 +49,7 @@ function addCardAction(cardAction: CardAction, includesOAuthButtons?: boolean) {
   }
 }
 
-export class AdaptiveCardBuilder {
+export default class AdaptiveCardBuilder {
   card: AdaptiveCard;
   container: Container;
 

diff --git a/...nt/src/Attachment/AdaptiveCardRenderer.js → ...eCards/Attachment/AdaptiveCardRenderer.js b/...nt/src/Attachment/AdaptiveCardRenderer.js → ...eCards/Attachment/AdaptiveCardRenderer.js
@@ -1,9 +1,13 @@
+import { HostConfig } from 'adaptivecards';
 import React from 'react';
 
-import { localize } from '../Localization/Localize';
-import connectToWebChat from '../connectToWebChat';
-import ErrorBox from '../ErrorBox';
-import getTabIndex from '../Utils/TypeFocusSink/getTabIndex';
+import { Components, connectToWebChat, getTabIndex, localize } from 'botframework-webchat-component';
+
+const { ErrorBox } = Components;
+
+function isPlainObject(obj) {
+  return obj.__proto__ === Object.prototype;
+}
 
 class AdaptiveCardRenderer extends React.PureComponent {
   constructor(props) {
@@ -97,9 +101,12 @@ class AdaptiveCardRenderer extends React.PureComponent {
         }
       };
 
-      adaptiveCard.hostConfig = adaptiveCardHostConfig;
       adaptiveCard.onExecuteAction = this.handleExecuteAction;
 
+      if (adaptiveCardHostConfig) {
+        adaptiveCard.hostConfig = isPlainObject(adaptiveCardHostConfig) ? new HostConfig(adaptiveCardHostConfig) : adaptiveCardHostConfig;
+      }
+
       const errors = adaptiveCard.validate();
 
       if (errors.length) {

diff --git a/...src/Attachment/AnimationCardAttachment.js → ...rds/Attachment/AnimationCardAttachment.js b/...src/Attachment/AnimationCardAttachment.js → ...rds/Attachment/AnimationCardAttachment.js
@@ -1,11 +1,11 @@
 import memoize from 'memoize-one';
 import React from 'react';
 
-import { AdaptiveCardBuilder } from '../Utils/AdaptiveCardBuilder';
+import { Components, connectToWebChat } from 'botframework-webchat-component';
+import { AdaptiveCardBuilder } from './AdaptiveCardBuilder';
 import CommonCard from './CommonCard';
-import connectToWebChat from '../connectToWebChat';
-import ImageContent from './ImageContent';
-import VideoContent from './VideoContent';
+
+const { ImageContent, VideoContent } = Components;
 
 class AnimationCardAttachment extends React.Component {
   constructor(props) {

diff --git a/...ent/src/Attachment/AudioCardAttachment.js → ...veCards/Attachment/AudioCardAttachment.js b/...ent/src/Attachment/AudioCardAttachment.js → ...veCards/Attachment/AudioCardAttachment.js
@@ -1,8 +1,9 @@
 import React from 'react';
 
-import AudioContent from './AudioContent';
+import { Components, connectToWebChat } from 'botframework-webchat-component';
 import CommonCard from './CommonCard';
-import connectToWebChat from '../connectToWebChat';
+
+const { AudioContent } = Components;
 
 export default connectToWebChat(
   ({ styleSet }) => ({ styleSet })

diff --git a/...es/component/src/Attachment/CommonCard.js → ...rc/adaptiveCards/Attachment/CommonCard.js b/...es/component/src/Attachment/CommonCard.js → ...rc/adaptiveCards/Attachment/CommonCard.js
@@ -1,7 +1,7 @@
 import memoize from 'memoize-one';
 import React from 'react';
 
-import { AdaptiveCardBuilder } from '../Utils/AdaptiveCardBuilder';
+import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 
 export default class extends React.Component {

diff --git a/...nent/src/Attachment/HeroCardAttachment.js → ...iveCards/Attachment/HeroCardAttachment.js b/...nent/src/Attachment/HeroCardAttachment.js → ...iveCards/Attachment/HeroCardAttachment.js
@@ -1,7 +1,7 @@
 import memoize from 'memoize-one';
 import React from 'react';
 
-import { AdaptiveCardBuilder } from '../Utils/AdaptiveCardBuilder';
+import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 
 export default class extends React.Component {

diff --git a/...ent/src/Attachment/OAuthCardAttachment.js → ...veCards/Attachment/OAuthCardAttachment.js b/...ent/src/Attachment/OAuthCardAttachment.js → ...veCards/Attachment/OAuthCardAttachment.js
@@ -1,7 +1,7 @@
 import memoize from 'memoize-one';
 import React from 'react';
 
-import { AdaptiveCardBuilder } from '../Utils/AdaptiveCardBuilder';
+import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 
 export default class extends React.Component {

diff --git a/...t/src/Attachment/ReceiptCardAttachment.js → ...Cards/Attachment/ReceiptCardAttachment.js b/...t/src/Attachment/ReceiptCardAttachment.js → ...Cards/Attachment/ReceiptCardAttachment.js
@@ -1,10 +1,9 @@
 import memoize from 'memoize-one';
 import React from 'react';
 
-import { AdaptiveCardBuilder } from '../Utils/AdaptiveCardBuilder';
-import { localize } from '../Localization/Localize';
+import { connectToWebChat, localize } from 'botframework-webchat-component';
+import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
-import connectToWebChat from '../connectToWebChat';
 
 function nullOrUndefined(obj) {
   return obj === null || typeof obj === 'undefined';

diff --git a/...nt/src/Attachment/SignInCardAttachment.js → ...eCards/Attachment/SignInCardAttachment.js b/...nt/src/Attachment/SignInCardAttachment.js → ...eCards/Attachment/SignInCardAttachment.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import CommonCard from './CommonCard';
-import connectToWebChat from '../connectToWebChat';
+import { connectToWebChat } from 'botframework-webchat-component';
 
 export default connectToWebChat(
   ({ styleSet }) => ({ styleSet })

diff --git a/...src/Attachment/ThumbnailCardAttachment.js → ...rds/Attachment/ThumbnailCardAttachment.js b/...src/Attachment/ThumbnailCardAttachment.js → ...rds/Attachment/ThumbnailCardAttachment.js
@@ -1,7 +1,7 @@
 import memoize from 'memoize-one';
 import React from 'react';
 
-import { AdaptiveCardBuilder } from '../Utils/AdaptiveCardBuilder';
+import AdaptiveCardBuilder from './AdaptiveCardBuilder';
 import AdaptiveCardRenderer from './AdaptiveCardRenderer';
 
 export default class extends React.Component {

diff --git a/...ent/src/Attachment/VideoCardAttachment.js → ...veCards/Attachment/VideoCardAttachment.js b/...ent/src/Attachment/VideoCardAttachment.js → ...veCards/Attachment/VideoCardAttachment.js
@@ -1,8 +1,9 @@
 import React from 'react';
 
+import { Components, connectToWebChat } from 'botframework-webchat-component';
 import CommonCard from './CommonCard';
-import connectToWebChat from '../connectToWebChat';
-import VideoContent from './VideoContent';
+
+const { VideoContent } = Components;
 
 export default connectToWebChat(
   ({ styleSet }) => ({ styleSet })

diff --git a/...ttachment/createAdaptiveCardMiddleware.js → ...tiveCards/createAdaptiveCardMiddleware.js b/...ttachment/createAdaptiveCardMiddleware.js → ...tiveCards/createAdaptiveCardMiddleware.js
@@ -1,14 +1,14 @@
 import React from 'react';
 
-import AdaptiveCardAttachment from '../../Attachment/AdaptiveCardAttachment';
-import AnimationCardAttachment from '../../Attachment/AnimationCardAttachment';
-import AudioCardAttachment from '../../Attachment/AudioCardAttachment';
-import HeroCardAttachment from '../../Attachment/HeroCardAttachment';
-import OAuthCardAttachment from '../../Attachment/OAuthCardAttachment';
-import ReceiptCardAttachment from '../../Attachment/ReceiptCardAttachment';
-import SignInCardAttachment from '../../Attachment/SignInCardAttachment';
-import ThumbnailCardAttachment from '../../Attachment/ThumbnailCardAttachment';
-import VideoCardAttachment from '../../Attachment/VideoCardAttachment';
+import AdaptiveCardAttachment from './Attachment/AdaptiveCardAttachment';
+import AnimationCardAttachment from './Attachment/AnimationCardAttachment';
+import AudioCardAttachment from './Attachment/AudioCardAttachment';
+import HeroCardAttachment from './Attachment/HeroCardAttachment';
+import OAuthCardAttachment from './Attachment/OAuthCardAttachment';
+import ReceiptCardAttachment from './Attachment/ReceiptCardAttachment';
+import SignInCardAttachment from './Attachment/SignInCardAttachment';
+import ThumbnailCardAttachment from './Attachment/ThumbnailCardAttachment';
+import VideoCardAttachment from './Attachment/VideoCardAttachment';
 
 // TODO: [P4] Rename this file or the whole middleware, it looks either too simple or too comprehensive now
 export default function (props) {

diff --git a/packages/component/.babelrc b/packages/component/.babelrc
@@ -7,7 +7,6 @@
     }
   },
   "plugins": [
-    "@babel/proposal-class-properties",
     "@babel/proposal-object-rest-spread",
     "babel-plugin-version-transform"
   ],

diff --git a/packages/component/package-lock.json b/packages/component/package-lock.json
diff --git a/packages/component/package.json b/packages/component/package.json
@@ -28,7 +28,6 @@
   "devDependencies": {
     "@babel/cli": "^7.4.3",
     "@babel/core": "^7.4.3",
-    "@babel/plugin-proposal-class-properties": "^7.4.0",
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
@@ -43,7 +42,6 @@
     "typescript": "^3.1.6"
   },
   "dependencies": {
-    "adaptivecards": "~1.1.3",
     "botframework-webchat-core": "^0.0.0-0",
     "bytes": "^3.0.0",
     "classnames": "^2.2.6",

diff --git a/packages/component/src/Composer.js b/packages/component/src/Composer.js
@@ -273,6 +273,7 @@ class Composer extends React.Component {
       //       If we let it thru, the code below become simplified and the user can plug in whatever they want for context, via Composer.props
       {
         activityRenderer,
+        // TODO: [P3] We should move adaptiveCardHostConfig to bundle
         adaptiveCardHostConfig: adaptiveCardHostConfig || defaultAdaptiveCardHostConfig(this.props.styleOptions),
         attachmentRenderer,
 

diff --git a/packages/component/src/Styles/StyleSet/AnimationCardAttachment.js b/packages/component/src/Styles/StyleSet/AnimationCardAttachment.js
@@ -1,3 +1,7 @@
+// TODO: [P4] We are moving attachments related to Adaptive Cards out of "component"
+//       Later, we will rewrite these attachments without Adaptive Cards
+//       We are leaving the CSS here as-is for now
+
 export default function () {
   return {
     display: 'flex',

diff --git a/packages/component/src/Styles/StyleSet/AudioCardAttachment.js b/packages/component/src/Styles/StyleSet/AudioCardAttachment.js
@@ -1,3 +1,7 @@
+// TODO: [P4] We are moving attachments related to Adaptive Cards out of "component"
+//       Later, we will rewrite these attachments without Adaptive Cards
+//       We are leaving the CSS here as-is for now
+
 export default function ({
   paddingRegular
 }) {