Clean up middleware signature (#5504)

* Clean up middleware signature

* Cleaner ~types

* Remove init and clean types

* Use createMiddleware

* Use createXXXMiddleware

* Use createXXXMiddleware

* Export schema

* Move to props schema

* Sort import

* Add enhancer function check

* Add more checks

* Clean up

* Add comment

* Better middleware array check

* Fix test

* Fix flaky test

* Better typing

* Better types

* Clean up

* Update warning message

* Clean up

* Add entry

* Remove comment

* Typo

* Mark middleware as readonly

* Remove return

Author: compulim

CHANGELOG.md

@@ -34,6 +34,11 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    - If you customized `renderMarkdown` with a custom HTML sanitizer, please move the HTML sanitizer to the new HTML content transformer middleware
 - `useGroupActivities` hook is being deprecated in favor of the `useGroupActivitiesByName` hook. The hook will be removed on or after 2027-05-04
 - `useSuggestedActions()` hook is being deprecated in favor of the `useSuggestedActionsHooks().useSuggestedActions()` hook. The hook will be removed on or after 2027-05-30
+- The following middleware should be created using their respective factory function:
+   - `activityBorderDecoratorMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
+   - `activityGroupingDecoratorMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
+   - `sendBoxMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
+   - `sendBoxToolbarMiddleware`, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
 
 ### Added
 
@@ -329,7 +334,8 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    - `useSendMessage` hook is updated to support sending attachments with a message
    - `useSendBoxAttachments` hook is added to get/set attachments in the send box
 - Resolves [#5081](https://github.com/microsoft/BotFramework-WebChat/issues/5081). Added `uploadAccept` and `uploadMultiple` style options, by [@ms-jb](https://github.com/ms-jb), in PR [#5048](https://github.com/microsoft/BotFramework-WebChat/pull/5048)
-- Added `sendBoxMiddleware` and `sendBoxToolbarMiddleware`, by [@compulim](https://github.com/compulim), in PR [#5120](https://github.com/microsoft/BotFramework-WebChat/pull/5120)
+- Added `sendBoxMiddleware` and `sendBoxToolbarMiddleware`, by [@compulim](https://github.com/compulim), in PR [#5120](https://github.com/microsoft/BotFramework-WebChat/pull/5120) and [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
+   - Instead of passing barebone middleware, use the `createSendBoxMiddleware()` and `createSendBoxToolbarMiddleware()` factory function correspondingly, related to PR [#5504](https://github.com/microsoft/BotFramework-WebChat/pull/5504)
 - (Experimental) Added `botframework-webchat-fluent-theme` package for applying Fluent UI theme to Web Chat, by [@compulim](https://github.com/compulim) and [@OEvgeny](https://github.com/OEvgeny)
    - Initial commit, in PR [#5120](https://github.com/microsoft/BotFramework-WebChat/pull/5120)
    - Inherits Fluent CSS palette if available, in PR [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)

__tests__/html/fluentTheme/withCustomDecorator.html

@@ -28,7 +28,7 @@
           React,
           ReactDOM: { render },
           WebChat: {
-            decorator: { DecoratorComposer },
+            decorator: { createActivityBorderMiddleware, DecoratorComposer },
             FluentThemeProvider,
             ReactWebChat
           }
@@ -43,12 +43,12 @@
         }
 
         const decoratorMiddleware = [
-          init =>
-            init === 'activity border' &&
-            (next => request => (request.livestreamingState === 'completing' ? Flair : next(request))),
-          init =>
-            init === 'activity border' &&
-            (next => request => (request.livestreamingState === 'preparing' ? Loader : next(request)))
+          createActivityBorderMiddleware(
+            next => request => (request.livestreamingState === 'completing' ? Flair : next(request))
+          ),
+          createActivityBorderMiddleware(
+            next => request => (request.livestreamingState === 'preparing' ? Loader : next(request))
+          )
         ];
 
         const { directLine, store } = testHelpers.createDirectLineEmulator();

__tests__/html/sendBoxMiddleware/warnIfInvalid.html

@@ -18,7 +18,7 @@
         await pageConditions.uiConnected();
 
         // THEN: It should warn about the invalid middleware.
-        await pageConditions.warnMessageLogged('"sendBoxMiddleware" prop is invalid.');
+        await pageConditions.warnMessageLogged('must be an array of function');
 
         // THEN: It should render the default send box.
         await host.snapshot();

__tests__/html/sendBoxToolbarMiddleware/warnIfInvalid.html

@@ -18,7 +18,7 @@
         await pageConditions.uiConnected();
 
         // THEN: It should warn about the invalid middleware.
-        await pageConditions.warnMessageLogged('"sendBoxToolbarMiddleware" prop is invalid.');
+        await pageConditions.warnMessageLogged('must be an array of function');
 
         // THEN: It should render the default send box.
         await host.snapshot();

__tests__/html2/feedbackForm/behavior.resetByEscapeKey.html

@@ -94,7 +94,9 @@
         // WHEN: Feedback form is opened.
         document.querySelector(`[data-testid="${testIds.sendBoxTextBox}"]`).focus();
         await host.sendShiftTab(3);
-        await host.sendKeys('UP', 'ENTER', 'RIGHT', 'SPACE');
+
+        // WHEN: Select the activity, then press right arrow key to select the dislike button (radio button).
+        await host.sendKeys('UP', 'ENTER', 'RIGHT');
 
         // THEN: The dislike button should be pressed.
         expect(Array.from(pageElements.allByTestId(testIds.feedbackButton)).map(element => element.checked)).toEqual([

__tests__/html2/feedbackForm/feedback.form.activity.html

@@ -93,8 +93,8 @@
         // THEN: Should match snapshot.
         await host.snapshot('local');
 
-        // WHEN: Click on dislike button to re-open feedback form
-        await host.sendKeys('RIGHT', 'SPACE');
+        // WHEN: Press right arrow key to select the dislike button (radio button).
+        await host.sendKeys('RIGHT');
 
         await pageConditions.became(
           'feedback form is open',

__tests__/html2/grouping/customGrouping.html

@@ -32,7 +32,10 @@
 
         const {
           React: { createElement },
-          WebChat: { renderWebChat }
+          WebChat: {
+            decorator: { createActivityGroupingMiddleware },
+            renderWebChat
+          }
         } = window; // Imports in UMD fashion.
 
         const clock = lolex.createClock();
@@ -62,22 +65,20 @@
             : undefined;
 
         const decoratorMiddleware = [
-          init =>
-            init === 'activity grouping' &&
-            (next => request => {
-              const DownstreamComponent = next(request);
-
-              if (request.groupingName) {
-                return ({ activities, children }) =>
-                  createElement(
-                    'div',
-                    { className: `grouping grouping--${request.groupingName}` },
-                    createElement(DownstreamComponent, { activities }, children)
-                  );
-              }
+          createActivityGroupingMiddleware(next => request => {
+            const DownstreamComponent = next(request);
+
+            if (request.groupingName) {
+              return ({ activities, children }) =>
+                createElement(
+                  'div',
+                  { className: `grouping grouping--${request.groupingName}` },
+                  createElement(DownstreamComponent, { activities }, children)
+                );
+            }
 
-              return DownstreamComponent;
-            })
+            return DownstreamComponent;
+          })
         ];
 
         renderWebChat(

__tests__/html2/grouping/disableAll.html

@@ -16,30 +16,31 @@
       run(async function () {
         const {
           React: { createElement },
-          WebChat: { renderWebChat }
+          WebChat: {
+            decorator: { createActivityGroupingMiddleware },
+            renderWebChat
+          }
         } = window; // Imports in UMD fashion.
 
         const clock = lolex.createClock();
 
         const { directLine, store } = testHelpers.createDirectLineEmulator({ ponyfill: clock });
 
         const decoratorMiddleware = [
-          init =>
-            init === 'activity grouping' &&
-            (next => request => {
-              const DownstreamComponent = next(request);
-
-              if (request.groupingName) {
-                return ({ activities, children }) =>
-                  createElement(
-                    'div',
-                    { className: `grouping grouping--${request.groupingName}` },
-                    createElement(DownstreamComponent, { activities }, children)
-                  );
-              }
-
-              return DownstreamComponent;
-            })
+          createActivityGroupingMiddleware(next => request => {
+            const DownstreamComponent = next(request);
+
+            if (request.groupingName) {
+              return ({ activities, children }) =>
+                createElement(
+                  'div',
+                  { className: `grouping grouping--${request.groupingName}` },
+                  createElement(DownstreamComponent, { activities }, children)
+                );
+            }
+
+            return DownstreamComponent;
+          })
         ];
 
         renderWebChat(

__tests__/html2/grouping/disableSender.html

@@ -16,30 +16,31 @@
       run(async function () {
         const {
           React: { createElement },
-          WebChat: { renderWebChat }
+          WebChat: {
+            decorator: { createActivityGroupingMiddleware },
+            renderWebChat
+          }
         } = window; // Imports in UMD fashion.
 
         const clock = lolex.createClock();
 
         const { directLine, store } = testHelpers.createDirectLineEmulator({ ponyfill: clock });
 
         const decoratorMiddleware = [
-          init =>
-            init === 'activity grouping' &&
-            (next => request => {
-              const DownstreamComponent = next(request);
-
-              if (request.groupingName) {
-                return ({ activities, children }) =>
-                  createElement(
-                    'div',
-                    { className: `grouping grouping--${request.groupingName}` },
-                    createElement(DownstreamComponent, { activities }, children)
-                  );
-              }
-
-              return DownstreamComponent;
-            })
+          createActivityGroupingMiddleware(next => request => {
+            const DownstreamComponent = next(request);
+
+            if (request.groupingName) {
+              return ({ activities, children }) =>
+                createElement(
+                  'div',
+                  { className: `grouping grouping--${request.groupingName}` },
+                  createElement(DownstreamComponent, { activities }, children)
+                );
+            }
+
+            return DownstreamComponent;
+          })
         ];
 
         renderWebChat(

__tests__/html2/grouping/disableStatus.html

@@ -16,30 +16,31 @@
       run(async function () {
         const {
           React: { createElement },
-          WebChat: { renderWebChat }
+          WebChat: {
+            decorator: { createActivityGroupingMiddleware },
+            renderWebChat
+          }
         } = window; // Imports in UMD fashion.
 
         const clock = lolex.createClock();
 
         const { directLine, store } = testHelpers.createDirectLineEmulator({ ponyfill: clock });
 
         const decoratorMiddleware = [
-          init =>
-            init === 'activity grouping' &&
-            (next => request => {
-              const DownstreamComponent = next(request);
-
-              if (request.groupingName) {
-                return ({ activities, children }) =>
-                  createElement(
-                    'div',
-                    { className: `grouping grouping--${request.groupingName}` },
-                    createElement(DownstreamComponent, { activities }, children)
-                  );
-              }
-
-              return DownstreamComponent;
-            })
+          createActivityGroupingMiddleware(next => request => {
+            const DownstreamComponent = next(request);
+
+            if (request.groupingName) {
+              return ({ activities, children }) =>
+                createElement(
+                  'div',
+                  { className: `grouping grouping--${request.groupingName}` },
+                  createElement(DownstreamComponent, { activities }, children)
+                );
+            }
+
+            return DownstreamComponent;
+          })
         ];
 
         renderWebChat(