diff --git a/CHANGELOG.md b/CHANGELOG.md index 0910d70b5e..99a7f62b99 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -42,12 +42,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. - PR [#2541](https://github.com/microsoft/BotFramework-WebChat/pull/2541): `useStyleOptions`, `useStyleSet` - PR [#2542](https://github.com/microsoft/BotFramework-WebChat/pull/2542): `useLanguage`, `useLocalize`, `useLocalizeDate` - PR [#2543](https://github.com/microsoft/BotFramework-WebChat/pull/2543): `useAdaptiveCardsHostConfig`, `useAdaptiveCardsPackage`, `useRenderMarkdownAsHTML` -- Bring your own Adaptive Cards package by specifying `adaptiveCardsPackage` prop, by [@compulim](https://github.com/compulim) in PR [#2543](https://github.com/microsoft/BotFramework-WebChat/pull/2543) - PR [#2544](https://github.com/microsoft/BotFramework-WebChat/pull/2544): `useAvatarForBot`, `useAvatarForUser` - PR [#2547](https://github.com/microsoft/BotFramework-WebChat/pull/2547): `useEmitTypingIndicator`, `usePeformCardAction`, `usePostActivity`, `useSendEvent`, `useSendFiles`, `useSendMessage`, `useSendMessageBack`, `useSendPostBack` - PR [#2548](https://github.com/microsoft/BotFramework-WebChat/pull/2548): `useDisabled` + - PR [#2549](https://github.com/microsoft/BotFramework-WebChat/pull/2549): `useSuggestedActions` - PR [#2551](https://github.com/microsoft/BotFramework-WebChat/pull/2551): `useLastTypingAt`, `useSendTypingIndicator`, `useTypingIndicator` - PR [#2552](https://github.com/microsoft/BotFramework-WebChat/pull/2552): `useFocusSendBox`, `useScrollToEnd`, `useSendBoxValue`, `useSubmitSendBox`, `useTextBoxSubmit`, `useTextBoxValue` +- Bring your own Adaptive Cards package by specifying `adaptiveCardsPackage` prop, by [@compulim](https://github.com/compulim) in PR [#2543](https://github.com/microsoft/BotFramework-WebChat/pull/2543) - Fixes [#2597](https://github.com/microsoft/BotFramework-WebChat/issues/2597). Modify `watch` script to `start` and add `tableflip` script for throwing `node_modules`, by [@corinagum](https://github.com/corinagum) in PR [#2598](https://github.com/microsoft/BotFramework-WebChat/pull/2598) ### Fixed diff --git a/__tests__/hooks/useSuggestedActions.js b/__tests__/hooks/useSuggestedActions.js new file mode 100644 index 0000000000..c3e52e8fff --- /dev/null +++ b/__tests__/hooks/useSuggestedActions.js @@ -0,0 +1,70 @@ +import { timeouts } from '../constants.json'; + +import suggestedActionsShown from '../setup/conditions/suggestedActionsShown'; +import uiConnected from '../setup/conditions/uiConnected'; + +// selenium-webdriver API doc: +// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html + +jest.setTimeout(timeouts.test); + +test('getter should get suggested actions', async () => { + const { driver, pageObjects } = await setupWebDriver(); + + await driver.wait(uiConnected(), timeouts.directLine); + + await pageObjects.sendMessageViaSendBox('suggested-actions'); + await driver.wait(suggestedActionsShown(), timeouts.directLine); + + await expect(pageObjects.runHook('useSuggestedActions', [], result => result[0])).resolves.toMatchInlineSnapshot(` + Array [ + Object { + "image": "https://tdurnford.github.io/BotFramework-Offline-MockBot/assets/square-icon.png", + "title": "IM back as string", + "type": "imBack", + "value": "postback imback-string", + }, + Object { + "image": "https://tdurnford.github.io/BotFramework-Offline-MockBot/assets/square-icon-red.png", + "title": "Post back as string", + "type": "postBack", + "value": "postback postback-string", + }, + Object { + "image": "https://tdurnford.github.io/BotFramework-Offline-MockBot/assets/square-icon-green.png", + "text": "Some text", + "title": "Post back as JSON", + "type": "postBack", + "value": Object { + "hello": "World!", + }, + }, + Object { + "displayText": "say Hello World!", + "image": "https://tdurnford.github.io/BotFramework-Offline-MockBot/assets/square-icon-purple.png", + "text": "Some text", + "title": "Message back as JSON with display text", + "type": "messageBack", + "value": Object { + "hello": "World!", + }, + }, + Object { + "image": "https://tdurnford.github.io/BotFramework-Offline-MockBot/assets/square-icon-purple.png", + "title": "Message back as JSON without display text", + "type": "messageBack", + "value": Object { + "hello": "World!", + }, + }, + Object { + "displayText": "Aloha", + "image": "https://tdurnford.github.io/BotFramework-Offline-MockBot/assets/square-icon-purple.png", + "text": "echo Hello", + "title": "Message back as string with display text", + "type": "messageBack", + "value": null, + }, + ] + `); +}); diff --git a/packages/component/src/SendBox/SuggestedAction.js b/packages/component/src/SendBox/SuggestedAction.js index 779e4a4e52..00204de654 100644 --- a/packages/component/src/SendBox/SuggestedAction.js +++ b/packages/component/src/SendBox/SuggestedAction.js @@ -7,6 +7,7 @@ import connectToWebChat from '../connectToWebChat'; import useDisabled from '../hooks/useDisabled'; import usePerformCardAction from '../hooks/usePerformCardAction'; import useStyleSet from '../hooks/useStyleSet'; +import useSuggestedActions from '../hooks/useSuggestedActions'; const SUGGESTED_ACTION_CSS = css({ display: 'inline-block', @@ -33,24 +34,26 @@ const connectSuggestedAction = (...selectors) => const SuggestedAction = ({ 'aria-hidden': ariaHidden, buttonText, - clearSuggestedActions, displayText, image, text, type, value }) => { + const [_, setSuggestedActions] = useSuggestedActions(); const [{ suggestedAction: suggestedActionStyleSet }] = useStyleSet(); const [disabled] = useDisabled(); const performCardAction = usePerformCardAction(); const handleClick = useCallback(() => { performCardAction({ displayText, text, type, value }); - type === 'openUrl' && clearSuggestedActions(); + type === 'openUrl' && setSuggestedActions([]); + }, [displayText, performCardAction, setSuggestedActions, text, type, value]); - // TODO: Use the following line when setSuggestedActions hook is merged - // type === 'openUrl' && setSuggestedActions([]); - }, [clearSuggestedActions, displayText, performCardAction, text, type, value]); + const handleClick = useCallback(() => { + performCardAction({ displayText, text, type, value }); + type === 'openUrl' && setSuggestedActions([]); + }, [displayText, performCardAction, setSuggestedActions, text, type, value]); return (
@@ -74,7 +77,6 @@ SuggestedAction.defaultProps = { SuggestedAction.propTypes = { 'aria-hidden': PropTypes.bool, buttonText: PropTypes.string.isRequired, - clearSuggestedActions: PropTypes.func.isRequired, displayText: PropTypes.string, image: PropTypes.string, text: PropTypes.string, @@ -82,6 +84,6 @@ SuggestedAction.propTypes = { value: PropTypes.any }; -export default connectSuggestedAction(({ clearSuggestedActions }) => ({ clearSuggestedActions }))(SuggestedAction); +export default SuggestedAction; export { connectSuggestedAction }; diff --git a/packages/component/src/hooks/index.js b/packages/component/src/hooks/index.js index 7bbbe0e5cd..e5ef0d5ec8 100644 --- a/packages/component/src/hooks/index.js +++ b/packages/component/src/hooks/index.js @@ -23,6 +23,7 @@ import useSendTypingIndicator from './useSendTypingIndicator'; import useStyleOptions from './useStyleOptions'; import useStyleSet from './useStyleSet'; import useSubmitSendBox from './useSubmitSendBox'; +import useSuggestedActions from './useSuggestedActions'; import { useSendBoxDictationStarted } from '../BasicSendBox'; import { useTextBoxSubmit } from '../SendBox/TextBox'; @@ -55,6 +56,7 @@ export { useStyleOptions, useStyleSet, useSubmitSendBox, + useSuggestedActions, useTextBoxSubmit, useTypingIndicatorVisible }; diff --git a/packages/component/src/hooks/useSuggestedActions.js b/packages/component/src/hooks/useSuggestedActions.js new file mode 100644 index 0000000000..c80cd1f91c --- /dev/null +++ b/packages/component/src/hooks/useSuggestedActions.js @@ -0,0 +1,20 @@ +import { useContext } from 'react'; + +import { useSelector } from '../WebChatReduxContext'; +import WebChatUIContext from '../WebChatUIContext'; + +export default function useSuggestedActions() { + const value = useSelector(({ suggestedActions }) => suggestedActions); + const { clearSuggestedActions } = useContext(WebChatUIContext); + + return [ + value, + value => { + if (value && value.length) { + throw new Error('SuggestedActions cannot be set to values other than empty.'); + } + + clearSuggestedActions(); + } + ]; +}