Fluent: integrate webchat focus management (#5150)

* Fluent: focus management integration

* Self review

* Update use-propagate

* Remove deprecated functionality

* Update test to use useFocus() hook

* Fix: itemEffector should pass cleanup callbacks

* Update changelog

* Fix changelog

* Update wordings

---------

Co-authored-by: William Wong <[email protected]>

Author: OEvgeny

CHANGELOG.md

@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  `useSuggestedActions` type is updated to align with its actual implementation, by [@OEvgeny](https://github.com/OEvgeny), in PR [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)
 -  Removed deprecated code: `connect*`, `useRenderActivity`, `useRenderActivityStatus`, `useRenderAvatar`, in PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), by [@compulim](https://github.com/compulim)
 -  Added named exports in both CommonJS and ES Modules module format, in PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), by [@compulim](https://github.com/compulim)
+-  Removed deprecated `useFocusSendBox()` hook, please use `useFocus('sendBox')` instead, in PR [#5150](https://github.com/microsoft/BotFramework-WebChat/pull/5150), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Added
 
@@ -53,6 +54,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    -  Added dark theme support, in PR [#5138](https://github.com/microsoft/BotFramework-WebChat/pull/5138)
    -  Added an information message to the telephone keypad, in PR [#5140](https://github.com/microsoft/BotFramework-WebChat/pull/5140)
    -  Added animation to focus indicator and pixel-perfected, in PR [#5143](https://github.com/microsoft/BotFramework-WebChat/pull/5143)
+   -  Integrated focus management for send box, in PR [#5150](https://github.com/microsoft/BotFramework-WebChat/pull/5150), by [@OEvgeny](https://github.com/OEvgeny)
 -  (Experimental) Added `<LocalizeString />` component which can be used to localize strings, by [@OEvgeny](https://github.com/OEvgeny) in PR [#5140](https://github.com/microsoft/BotFramework-WebChat/pull/5140)
 -  Added `<ThemeProvider>` component to apply theme pack to Web Chat, by [@compulim](https://github.com/compulim), in PR [#5120](https://github.com/microsoft/BotFramework-WebChat/pull/5120)
 -  Added `useMakeThumbnail` hook option to create a thumbnail from the file given, by [@compulim](https://github.com/compulim), in PR [#5123](https://github.com/microsoft/BotFramework-WebChat/pull/5123) and [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)
@@ -66,6 +68,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#5146](https://github.com/microsoft/BotFramework-WebChat/issues/5146). Fixed chat history focus indicator should not show up on tap, by [@OEvgeny](https://github.com/OEvgeny), in PR [#5145](https://github.com/microsoft/BotFramework-WebChat/pull/5145)
 -  Fixes type portability issues by exporting types from all exported code, in PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), by [@compulim](https://github.com/compulim)
 -  Fixes missing exports of `useNotifications`, in PR [#5148](https://github.com/microsoft/BotFramework-WebChat/pull/5148), by [@compulim](https://github.com/compulim)
+-  Fixes suggested actions keyboard navigation skips actions after suggested actions got updated, in PR [#5150](https://github.com/microsoft/BotFramework-WebChat/pull/5150), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Changed
 

__tests__/__image_snapshots__/html/focus-management-back-to-send-box-js-fluent-theme-applied-focus-moves-back-to-sendbox-when-letter-pressed-1-snap.png

@@ -13,7 +13,7 @@ test('calling emitTypingIndicator should send a typing activity', async () => {
 
   await driver.wait(uiConnected(), timeouts.directLine);
 
-  await pageObjects.runHook('useFocusSendBox', [], fn => fn());
+  await pageObjects.runHook('useFocus', [], fn => fn('sendBox'));
 
   await driver.wait(sendBoxTextBoxFocused(), timeouts.ui);
 });

__tests__/__image_snapshots__/html/focus-management-back-to-send-box-js-fluent-theme-applied-focus-moves-back-to-sendbox-when-letter-pressed-2-snap.png

@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/[email protected]/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>
+    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="text/babel">
+      run(async function () {
+        const {
+          React,
+          ReactDOM: { render },
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const App = () => (
+          <ReactWebChat directLine={directLine} store={store} styleOptions={{ hideTelephoneKeypadButton: false }} />
+        );
+
+        render(
+          <FluentThemeProvider>
+            <App />
+          </FluentThemeProvider>,
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity(
+          'Eiusmod anim adipisicing cupidatat adipisicing officia sint qui consequat veniam id aute.'
+        );
+
+        await pageConditions.numActivitiesShown(1);
+
+        document.querySelector(`[data-testid="${WebChat.testIds.sendBoxTextBox}"]`).focus();
+
+        // WHEN: SHIFT-TAB key is pressed.
+        await host.sendShiftTab();
+
+        // THEN: Should focus on the chat history.
+        await host.snapshot();
+
+        // WHEN: A key is pressed.
+        await host.sendKeys('The quick brown fox jumps over the lazy dog');
+
+        // THEN: Should focus on the SendBox
+        await host.snapshot();
+
+        await (await directLine.actPostActivity(() => host.sendKeys('\n'))).resolveAll();
+
+        // THEN: Should send the activity.
+        await pageConditions.numActivitiesShown(2);
+        await pageConditions.allOutgoingActivitiesSent();
+        await host.snapshot();
+      });
+    </script>
+  </body>
+</html>

__tests__/__image_snapshots__/html/focus-management-back-to-send-box-js-fluent-theme-applied-focus-moves-back-to-sendbox-when-letter-pressed-3-snap.png

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Fluent theme applied', () => {
+  test('focus moves back to sendbox when letter pressed', () => runHTML('fluentTheme/focusManagement.backToSendBox'));
+});

__tests__/hooks/useFocusSendBox.js

@@ -31,7 +31,7 @@
         await pageConditions.uiConnected();
 
         // WHEN: The callback of "useFocus()" is called.
-        await renderWebChatWithHook(() => window.WebChat.hooks.useFocus()());
+        await renderWebChatWithHook(() =>  Promise.resolve(window.WebChat.hooks.useFocus()).then(focus => focus()));
 
         // THEN: It should focus on the (blank) transcript.
         await host.snapshot();

__tests__/html/fluentTheme/focusManagement.backToSendBox.html

@@ -29,7 +29,7 @@
         );
 
         await pageConditions.uiConnected();
-        await pageObjects.runHook(({ useFocus }) => useFocus()('sendBox'));
+        await pageObjects.runHook(({ useFocus }) => Promise.resolve(useFocus()).then(focus => focus('sendBox')));
 
         await host.snapshot();
       });

__tests__/html/fluentTheme/focusManagement.backToSendBox.js

@@ -32,7 +32,7 @@
 
         // Since the keyboard is controlled by the browser and OS, we cannot test if the keyboard activated or not.
         // This is our best-effort to check if focus is being set correctly or not.
-        await pageObjects.runHook(({ useFocus }) => useFocus()('sendBoxWithoutKeyboard'));
+        await pageObjects.runHook(({ useFocus }) => Promise.resolve(useFocus()).then(focus => focus('sendBoxWithoutKeyboard')));
 
         await host.snapshot();
       });