Add Web Chat-specific webchat:callURL action

CHANGELOG.md

@@ -22,11 +22,17 @@ Legends:
 ### Added
 
 - Added `styleOptions.richCardTitleOmitHeadingRole` (default `false`) to opt out of `style: 'heading'` on rich card titles, in PR [#5839](https://github.com/microsoft/BotFramework-WebChat/pull/5839), by [@cjennison](https://github.com/cjennison)
-- Added support of Adaptive Cards `Action.Submit` action with `msteams/signin` sub-action to open sign-in link in a popup window, in PR [#5860](https://github.com/microsoft/BotFramework-WebChat/pull/5860), by [@compulim](https://github.com/compulim)
-   - Added `styleOptions.adaptiveCardSignInActionPopupWindowHeight/Width` for sizing the sign-in popup window
-   - Link to [Adaptive Cards spec](https://adaptivecards.microsoft.com/?topic=SigninSubmitActionData)
-   - Refer to [this test](./__tests__/html2/adaptiveCard/signInAction.html) for the reference payload
-   - Note: this implementation is based on observation of how Microsoft Teams behave and could deviate from their official implementation
+- ~~Added support of Adaptive Cards `Action.Submit` action with `msteams/signin` sub-action to open sign-in link in a popup window, in PR [#5860](https://github.com/microsoft/BotFramework-WebChat/pull/5860), by [@compulim](https://github.com/compulim)~~
+   - ~~Added `styleOptions.adaptiveCardSignInActionPopupWindowHeight/Width` for sizing the sign-in popup window~~
+   - ~~Link to [Adaptive Cards spec](https://adaptivecards.microsoft.com/?topic=SigninSubmitActionData)~~
+   - ~~Refer to [this test](./__tests__/html2/adaptiveCard/signInAction.html) for the reference payload~~
+   - ~~Note: this implementation is based on observation of how Microsoft Teams behave and could deviate from their official implementation~~
+   - Obsoleted in favor of PR [#5862](https://github.com/microsoft/BotFramework-WebChat/pull/5862)
+- Added card action `webchat:callURL` and [Adaptive Card action `Action.OpenUrlDialog`](https://adaptivecards.microsoft.com/?topic=Action.OpenUrlDialog), in PR [#5862](https://github.com/microsoft/BotFramework-WebChat/pull/5862), by [@compulim](https://github.com/compulim)
+   - Added `styleOptions.callURLActionPopupWindowHeight/Width` for sizing the popup window
+   - Reference payload for Direct Line `webchat:callURL` card action can be found in [this test](./__tests__/html2/adaptiveCard/openUrlDialog/heroCard.html)
+   - Reference payload for Adaptive Card `Action.OpenUrlDialog` can be found in [this test](./__tests__/html2/adaptiveCard/openUrlDialog/simple.html)
+   - Note: the Adaptive Card implementation is based on observation of how other apps behave and could deviate from their official implementation
 
 ### Fixed
 

__tests__/html2/adaptiveCard/msteams/signInSubAction.disallowedScheme.html → __tests__/html2/adaptiveCard/openUrlDialog/disallowedScheme.html

@@ -52,15 +52,16 @@
                   {
                     actions: [
                       {
-                        title: 'Sign in',
-                        type: 'Action.Submit',
-                        data: {
-                          msteams: {
-                            type: 'signin',
-                            value: 'mailto:johndoe@microsoft.com'
-                          }
+                        title: 'Sign in (Action.OpenUrlDialog)',
+                        type: 'Action.OpenUrlDialog',
+                        url: 'mailto:johndoe@microsoft.com',
+
+                        fallback: {
+                          title: 'Sign in (Action.OpenUrl)',
+                          type: 'Action.OpenUrl',
+                          url: 'mailto:johndoe@microsoft.com'
                         }
-                      }
+                      },
                     ],
                     type: 'ActionSet'
                   }
@@ -101,14 +102,15 @@
         };
 
         // WHEN: The "Sign in" button is clicked.
-        await host.click(document.querySelector('[aria-label="Sign in"]'));
+        await host.click(document.querySelector('[aria-label="Sign in (Action.OpenUrlDialog)"]'));
 
         // THEN: Should not call `window.open`.
         expect(windowOpenCalled).toBe(false);
 
         // THEN: Should warn.
         expect(consoleWarnArgs).toEqual([
-          'botframework-webchat: "Action.Submit/msteams" sub-action validation error.',
+          'botframework-webchat: Cannot call invalid URL.',
+          'mailto:johndoe@microsoft.com',
           '"value" must have protocol of either "http:" or "https:"'
         ]);
       });

__tests__/html2/adaptiveCard/openUrlDialog/heroCard.html

@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "react": "/__dist__/packages/bundle/static/react.js",
+          "react-dom": "/__dist__/packages/bundle/static/react-dom.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createDirectLine, createStoreWithOptions, renderWebChat } from 'botframework-webchat';
+
+      testHelpers.hideKnownError();
+
+      run(async function () {
+        const {
+          testHelpers: { createDirectLineEmulator }
+        } = window;
+
+        // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+        window.WebChat = { createStoreWithOptions };
+
+        const { directLine, store } = createDirectLineEmulator();
+
+        renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          attachments: [
+            {
+              contentType: 'application/vnd.microsoft.card.hero',
+              content: {
+                buttons: [
+                  {
+                    title: 'Sign in (webchat:callURL)',
+                    type: 'webchat:callURL',
+                    value: new URL('dialog.skip.html', location).toString()
+                  }
+                ],
+                title: 'Hero card with a "webchat:callURL" button'
+              }
+            }
+          ],
+          from: {
+            id: 'bot',
+            role: 'bot'
+          },
+          id: '1',
+          timestamp: new Date().toISOString(),
+          type: 'message'
+        });
+
+        // THEN: Should render the hero card with a "Sign in" button.
+        await pageConditions.numActivitiesShown(1);
+
+        // GIVEN: Intercept window.open to watch the popup window to be closed.
+        const originalOpen = window.open.bind(window);
+        const popupClosedDeferred = Promise.withResolvers();
+        let windowOpenArgs;
+
+        window.open = (...args) => {
+          const popup = originalOpen(...args);
+
+          windowOpenArgs = args;
+
+          // Note: popup.addEventListener('close') does not dispatch.
+          const interval = setInterval(() => {
+            if (popup?.closed) {
+              clearInterval(interval);
+
+              popupClosedDeferred.resolve();
+            }
+          }, 100);
+
+          return popup;
+        };
+
+        // WHEN: The "Sign in" button is clicked.
+        await host.click(document.querySelector('[aria-label="Sign in (webchat:callURL)"]'));
+
+        // THEN: Popup window should close itself.
+        await Promise.race([
+          popupClosedDeferred.promise,
+          // THEN: Fail if popup window does not close after 2 seconds.
+          new Promise((_, reject) =>
+            setTimeout(() => reject(new Error('Timed out waiting for popup window to be closed')), 2_000)
+          )
+        ]);
+
+        // THEN: Should call "window.open" as a popup, instead of a plain "openUrl" action.
+        expect(windowOpenArgs).toEqual([
+          expect.stringContaining('dialog.skip.html'),
+          '_blank',
+          'height=640,popup,width=480'
+        ]);
+      });
+    </script>
+  </body>
+</html>

__tests__/html2/adaptiveCard/msteams/signInSubAction.relativeURL.html → __tests__/html2/adaptiveCard/openUrlDialog/relativeURL.html

@@ -52,13 +52,14 @@
                   {
                     actions: [
                       {
-                        title: 'Sign in',
-                        type: 'Action.Submit',
-                        data: {
-                          msteams: {
-                            type: 'signin',
-                            value: '/index.html'
-                          }
+                        title: 'Sign in (Action.OpenUrlDialog)',
+                        type: 'Action.OpenUrlDialog',
+                        url: '/index.html',
+
+                        fallback: {
+                          title: 'Sign in (Action.OpenUrl)',
+                          type: 'Action.OpenUrl',
+                          url: '/index.html'
                         }
                       }
                     ],
@@ -101,14 +102,15 @@
         };
 
         // WHEN: The "Sign in" button is clicked.
-        await host.click(document.querySelector('[aria-label="Sign in"]'));
+        await host.click(document.querySelector('[aria-label="Sign in (Action.OpenUrlDialog)"]'));
 
         // THEN: Should not call `window.open`.
         expect(windowOpenCalled).toBe(false);
 
         // THEN: Should warn.
         expect(consoleWarnArgs).toEqual([
-          'botframework-webchat: "Action.Submit/msteams" sub-action validation error.',
+          'botframework-webchat: Cannot call invalid URL.',
+          '/index.html',
           '"value" must be an absolute URL',
           '"value" must have protocol of either "http:" or "https:"'
         ]);

__tests__/html2/adaptiveCard/msteams/signInSubAction.html → __tests__/html2/adaptiveCard/openUrlDialog/simple.html

@@ -52,15 +52,16 @@
                   {
                     actions: [
                       {
-                        title: 'Sign in',
-                        type: 'Action.Submit',
-                        data: {
-                          msteams: {
-                            type: 'signin',
-                            value: new URL('signInSubAction.skip.html', location).toString()
-                          }
+                        title: 'Sign in (Action.OpenUrlDialog)',
+                        type: 'Action.OpenUrlDialog',
+                        url: new URL('dialog.skip.html', location).toString(),
+
+                        fallback: {
+                          title: 'Sign in (Action.OpenUrl)',
+                          type: 'Action.OpenUrl',
+                          url: new URL('dialog.skip.html', location).toString()
                         }
-                      }
+                      },
                     ],
                     type: 'ActionSet'
                   }
@@ -93,7 +94,7 @@
 
           // Note: popup.addEventListener('close') does not dispatch.
           const interval = setInterval(() => {
-            if (popup.closed) {
+            if (popup?.closed) {
               clearInterval(interval);
 
               popupClosedDeferred.resolve();
@@ -104,7 +105,7 @@
         };
 
         // WHEN: The "Sign in" button is clicked.
-        await host.click(document.querySelector('[aria-label="Sign in"]'));
+        await host.click(document.querySelector('[aria-label="Sign in (Action.OpenUrlDialog)"]'));
 
         // THEN: Popup window should close itself.
         await Promise.race([
@@ -116,7 +117,7 @@
         ]);
 
         expect(windowOpenArgs).toEqual([
-          expect.stringContaining('signInSubAction.skip.html'),
+          expect.stringContaining('dialog.skip.html'),
           '_blank',
           'height=640,popup,width=480'
         ]);

__tests__/html2/adaptiveCard/msteams/signInSubAction.size.html → __tests__/html2/adaptiveCard/openUrlDialog/size.html

@@ -32,8 +32,8 @@
 
         const { directLine, store } = createDirectLineEmulator();
         const styleOptions = {
-          adaptiveCardSignInActionPopupWindowHeight: 480,
-          adaptiveCardSignInActionPopupWindowWidth: 360
+          callURLActionPopupWindowHeight: 480,
+          callURLActionPopupWindowWidth: 360
         };
 
         renderWebChat({ directLine, store, styleOptions }, document.getElementById('webchat'));
@@ -56,13 +56,14 @@
                   {
                     actions: [
                       {
-                        title: 'Sign in',
-                        type: 'Action.Submit',
-                        data: {
-                          msteams: {
-                            type: 'signin',
-                            value: new URL('signInSubAction.skip.html', location)
-                          }
+                        title: 'Sign in (Action.OpenUrlDialog)',
+                        type: 'Action.OpenUrlDialog',
+                        url: new URL('dialog.skip.html', location).toString(),
+
+                        fallback: {
+                          title: 'Sign in (Action.OpenUrl)',
+                          type: 'Action.OpenUrl',
+                          url: new URL('dialog.skip.html', location).toString()
                         }
                       }
                     ],
@@ -96,7 +97,7 @@
 
           // Note: popup.addEventListener('close') does not dispatch.
           const interval = setInterval(() => {
-            if (popup.closed) {
+            if (popup?.closed) {
               clearInterval(interval);
 
               popupClosedDeferred.resolve();
@@ -107,7 +108,7 @@
         };
 
         // WHEN: The "Sign in" button is clicked.
-        await host.click(document.querySelector('[aria-label="Sign in"]'));
+        await host.click(document.querySelector('[aria-label="Sign in (Action.OpenUrlDialog)"]'));
 
         // THEN: Popup window should close itself.
         await Promise.race([
@@ -119,7 +120,7 @@
         ]);
 
         expect(windowOpenArgs).toEqual([
-          expect.stringContaining('signInSubAction.skip.html'),
+          expect.stringContaining('dialog.skip.html'),
           '_blank',
           'height=480,popup,width=360'
         ]);