Merge a952cb5 into f3275bc

CHANGELOG.md

@@ -39,6 +39,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    - Fixes [#2737](https://github.com/microsoft/BotFramework-WebChat/issues/2737). Use `driver.wait` for conditions
    - Fixes [#2776](https://github.com/microsoft/BotFramework-WebChat/issues/2776). Wait until button is shown/hid before taking screenshot
    - Use a new timeout `fetchImage` for images
+-  Fixes [#2747](https://github.com/microsoft/BotFramework-WebChat/issues/2747). Moved `SendStatus` into the `Timestamp` component and removed the `sendStatus` style set, by [@tdurnford](https://github.com/tdurnford) in PR [#2735](https://github.com/microsoft/BotFramework-WebChat/pull/2735)
+
 
 ### Changed
 

packages/component/src/Activity/CarouselFilmStrip.js

@@ -5,15 +5,12 @@ import { Context as FilmContext } from 'react-film';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import remarkStripMarkdown from '../Utils/remarkStripMarkdown';
-
-import { Constants } from 'botframework-webchat-core';
 
 import Avatar from './Avatar';
 import Bubble from './Bubble';
 import connectToWebChat from '../connectToWebChat';
+import remarkStripMarkdown from '../Utils/remarkStripMarkdown';
 import ScreenReaderText from '../ScreenReaderText';
-import SendStatus from './SendStatus';
 import textFormatToContentType from '../Utils/textFormatToContentType';
 import Timestamp from './Timestamp';
 import useAvatarForBot from '../hooks/useAvatarForBot';
@@ -22,10 +19,6 @@ import useLocalize from '../hooks/useLocalize';
 import useStyleOptions from '../hooks/useStyleOptions';
 import useStyleSet from '../hooks/useStyleSet';
 
-const {
-  ActivityClientState: { SENDING, SEND_FAILED }
-} = Constants;
-
 const ROOT_CSS = css({
   display: 'flex',
   MsOverflowStyle: 'none',
@@ -107,7 +100,7 @@ const WebChatCarouselFilmStrip = ({
 
   const {
     attachments = [],
-    channelData: { messageBack: { displayText: messageBackDisplayText } = {}, state } = {},
+    channelData: { messageBack: { displayText: messageBackDisplayText } = {} } = {},
     from: { role } = {},
     text,
     textFormat
@@ -156,11 +149,7 @@ const WebChatCarouselFilmStrip = ({
           ))}
         </ul>
         <div className={classNames({ webchat__carousel__item_indented: indented })}>
-          {state === SENDING || state === SEND_FAILED ? (
-            <SendStatus activity={activity} />
-          ) : (
-            <Timestamp activity={activity} className={timestampClassName} />
-          )}
+          <Timestamp activity={activity} className={timestampClassName} />
         </div>
       </div>
     </div>

packages/component/src/Activity/SendStatus.js

@@ -31,10 +31,15 @@ const connectSendStatus = (...selectors) =>
   );
 
 const SendStatus = ({ activity }) => {
-  const [{ sendStatus: sendStatusStyleSet }] = useStyleSet();
+  const [{ sendStatus: sendStatusStyleSet, timestamp: timestampStyleSet }] = useStyleSet();
   const focusSendBox = useFocusSendBox();
   const postActivity = usePostActivity();
 
+  sendStatusStyleSet &&
+    console.warn(
+      'Web Chat: styleSet.sendStatus is being deprecated. Please use styleSet.timestamp. This deprecation migration will be removed on or after December 17, 2021.'
+    );
+
   // TODO: [P4] Currently, this is the only place which use a templated string
   //       We could refactor this into a general component if there are more templated strings
   const localizedSending = useLocalize('Sending');
@@ -63,7 +68,7 @@ const SendStatus = ({ activity }) => {
   return (
     <React.Fragment>
       <ScreenReaderText text={localizedSendStatus + localizedSending} />
-      <span aria-hidden={true} className={sendStatusStyleSet}>
+      <span aria-hidden={true} className={timestampStyleSet}>
         {state === SENDING ? (
           localizedSending
         ) : state === SEND_FAILED ? (

packages/component/src/Activity/StackedLayout.js

@@ -1,6 +1,5 @@
 /* eslint react/no-array-index-key: "off" */
 
-import { Constants } from 'botframework-webchat-core';
 import { css } from 'glamor';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -11,7 +10,6 @@ import Avatar from './Avatar';
 import Bubble from './Bubble';
 import connectToWebChat from '../connectToWebChat';
 import ScreenReaderText from '../ScreenReaderText';
-import SendStatus from './SendStatus';
 import textFormatToContentType from '../Utils/textFormatToContentType';
 import Timestamp from './Timestamp';
 import useAvatarForBot from '../hooks/useAvatarForBot';
@@ -21,10 +19,6 @@ import useLocalizeDate from '../hooks/useLocalizeDate';
 import useStyleOptions from '../hooks/useStyleOptions';
 import useStyleSet from '../hooks/useStyleSet';
 
-const {
-  ActivityClientState: { SENDING, SEND_FAILED }
-} = Constants;
-
 const ROOT_CSS = css({
   display: 'flex',
 
@@ -93,7 +87,7 @@ const StackedLayout = ({ activity, children, timestampClassName }) => {
 
   const {
     attachments = [],
-    channelData: { messageBack: { displayText: messageBackDisplayText } = {}, state } = {},
+    channelData: { messageBack: { displayText: messageBackDisplayText } = {} } = {},
     from: { role } = {},
     text,
     textFormat,
@@ -103,7 +97,6 @@ const StackedLayout = ({ activity, children, timestampClassName }) => {
   const activityDisplayText = messageBackDisplayText || text;
   const fromUser = role === 'user';
   const initials = fromUser ? userInitials : botInitials;
-  const showSendStatus = state === SENDING || state === SEND_FAILED;
   const plainText = remarkStripMarkdown(text);
   const indented = fromUser ? bubbleFromUserNubSize : bubbleNubSize;
 
@@ -161,11 +154,7 @@ const StackedLayout = ({ activity, children, timestampClassName }) => {
           </div>
         ))}
         <div className={classNames('webchat__row', { webchat__stacked_item_indented: indented })}>
-          {showSendStatus ? (
-            <SendStatus activity={activity} className="timestamp" />
-          ) : (
-            <Timestamp activity={activity} aria-hidden={true} className={classNames('timestamp', timestampClassName)} />
-          )}
+          <Timestamp activity={activity} aria-hidden={true} className={classNames('timestamp', timestampClassName)} />
           <div className="filler" />
         </div>
       </div>

packages/component/src/Activity/Timestamp.js

@@ -1,21 +1,32 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { Constants } from 'botframework-webchat-core';
 
 import AbsoluteTime from '../Utils/AbsoluteTime';
 import RelativeTime from '../Utils/RelativeTime';
 import useStyleOptions from '../hooks/useStyleOptions';
 import useStyleSet from '../hooks/useStyleSet';
 
-const Timestamp = ({ activity: { timestamp }, 'aria-hidden': ariaHidden, className }) => {
+import SendStatus from './SendStatus';
+
+const {
+  ActivityClientState: { SENDING, SEND_FAILED }
+} = Constants;
+
+const Timestamp = ({ activity, 'aria-hidden': ariaHidden, className }) => {
+  const { channelData: { state } = {}, timestamp } = activity;
+
   const [{ timestampFormat }] = useStyleOptions();
   const [{ timestamp: timestampStyleSet }] = useStyleSet();
 
   if (!timestamp) {
     return false;
   }
 
-  return (
+  return state === SENDING || state === SEND_FAILED ? (
+    <SendStatus activity={activity} className="timestamp" />
+  ) : (
     <span aria-hidden={ariaHidden} className={classNames(timestampStyleSet + '', (className || '') + '')}>
       {timestampFormat === 'relative' ? <RelativeTime value={timestamp} /> : <AbsoluteTime value={timestamp} />}
     </span>
@@ -29,6 +40,9 @@ Timestamp.defaultProps = {
 
 Timestamp.propTypes = {
   activity: PropTypes.shape({
+    channelData: PropTypes.shape({
+      state: PropTypes.string
+    }),
     timestamp: PropTypes.string.isRequired
   }).isRequired,
   'aria-hidden': PropTypes.bool,

packages/component/src/Styles/StyleSet/Timestamp.js

@@ -1,8 +1,17 @@
-export default function createTimestampStyle({ fontSizeSmall, primaryFont, subtle, timestampColor }) {
+export default function createTimestampStyle({ accent, fontSizeSmall, primaryFont, subtle, timestampColor }) {
   return {
     color: timestampColor || subtle,
     fontFamily: primaryFont,
     fontSize: fontSizeSmall,
-    paddingTop: 5
+    paddingTop: 5,
+
+    '& > button': {
+      backgroundColor: 'transparent',
+      border: 0,
+      color: accent,
+      cursor: 'pointer',
+      fontFamily: 'inherit',
+      padding: 0
+    }
   };
 }

packages/component/src/Styles/createStyleSet.js

@@ -19,7 +19,6 @@ import createSendBoxButtonStyle from './StyleSet/SendBoxButton';
 import createSendBoxStyle from './StyleSet/SendBox';
 import createSendBoxTextAreaStyle from './StyleSet/SendBoxTextArea';
 import createSendBoxTextBoxStyle from './StyleSet/SendBoxTextBox';
-import createSendStatusStyle from './StyleSet/SendStatus';
 import createSingleAttachmentActivityStyle from './StyleSet/SingleAttachmentActivity';
 import createSpinnerAnimationStyle from './StyleSet/SpinnerAnimation';
 import createStackedLayoutStyle from './StyleSet/StackedLayout';
@@ -194,7 +193,6 @@ export default function createStyleSet(options) {
     sendBoxButton: createSendBoxButtonStyle(options),
     sendBoxTextArea: createSendBoxTextAreaStyle(options),
     sendBoxTextBox: createSendBoxTextBoxStyle(options),
-    sendStatus: createSendStatusStyle(options),
     singleAttachmentActivity: createSingleAttachmentActivityStyle(options),
     spinnerAnimation: createSpinnerAnimationStyle(options),
     stackedLayout: createStackedLayoutStyle(options),