Moved Timestamp into SendStatus component

CHANGELOG.md

@@ -39,7 +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 [#2780](https://github.com/microsoft/BotFramework-WebChat/issues/2780). Added the `tel` protocol to the `allowedSchema` in the `sanitize-html` options, by [@tdurnford](https://github.com/tdurnford) in PR [#27XX](https://github.com/microsoft/BotFramework-WebChat/pull/27XX)
+-  Fixes [#2780](https://github.com/microsoft/BotFramework-WebChat/issues/2780). Added the `tel` protocol to the `allowedSchema` in the `sanitize-html` options, by [@tdurnford](https://github.com/tdurnford) in PR [#2787](https://github.com/microsoft/BotFramework-WebChat/pull/2787)
+-  Fixes [#2747](https://github.com/microsoft/BotFramework-WebChat/issues/2747). Moved `Timestamp` into the `SendStatus` component and removed the `Timestamp` style set, by [@tdurnford](https://github.com/tdurnford) in PR [#2786](https://github.com/microsoft/BotFramework-WebChat/pull/2786)
 -  Fixes [#2647](https://github.com/microsoft/BotFramework-WebChat/issues/2647). Update the `CroppedImage` component `PropType`, by [@tdurnford](https://github.com/tdurnford) in PR [#2795](https://github.com/microsoft/BotFramework-WebChat/pull/2795)
 
 ### Changed

packages/component/src/Activity/CarouselFilmStrip.js

@@ -7,25 +7,18 @@ 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 ScreenReaderText from '../ScreenReaderText';
 import SendStatus from './SendStatus';
 import textFormatToContentType from '../Utils/textFormatToContentType';
-import Timestamp from './Timestamp';
 import useAvatarForBot from '../hooks/useAvatarForBot';
 import useAvatarForUser from '../hooks/useAvatarForUser';
 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} />
-          )}
+          <SendStatus activity={activity} className={timestampClassName} />
         </div>
       </div>
     </div>

packages/component/src/Activity/SendStatus.js

@@ -1,9 +1,11 @@
 import { Constants } from 'botframework-webchat-core';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useCallback } from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 import ScreenReaderText from '../ScreenReaderText';
+import Timestamp from './Timestamp';
 import useFocusSendBox from '../hooks/useFocusSendBox';
 import useLocalize from '../hooks/useLocalize';
 import usePostActivity from '../hooks/usePostActivity';
@@ -30,7 +32,7 @@ const connectSendStatus = (...selectors) =>
     ...selectors
   );
 
-const SendStatus = ({ activity }) => {
+const SendStatus = ({ activity, timestampClassName }) => {
   const [{ sendStatus: sendStatusStyleSet }] = useStyleSet();
   const focusSendBox = useFocusSendBox();
   const postActivity = usePostActivity();
@@ -56,11 +58,9 @@ const SendStatus = ({ activity }) => {
   );
 
   const sendFailedRetryMatch = /\{Retry\}/u.exec(sendFailedText);
-  const {
-    channelData: { state }
-  } = activity;
+  const { channelData: { state } = {} } = activity;
 
-  return (
+  return state === SENDING || state === SEND_FAILED ? (
     <React.Fragment>
       <ScreenReaderText text={localizedSendStatus + localizedSending} />
       <span aria-hidden={true} className={sendStatusStyleSet}>
@@ -85,6 +85,8 @@ const SendStatus = ({ activity }) => {
         )}
       </span>
     </React.Fragment>
+  ) : (
+    <Timestamp activity={activity} aria-hidden={true} className={classNames('timestamp', timestampClassName)} />
   );
 };
 
@@ -93,7 +95,8 @@ SendStatus.propTypes = {
     channelData: PropTypes.shape({
       state: PropTypes.string
     })
-  }).isRequired
+  }).isRequired,
+  timestampClassName: PropTypes.string.isRequired
 };
 
 export default SendStatus;

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';
@@ -13,18 +12,13 @@ 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';
 import useAvatarForUser from '../hooks/useAvatarForUser';
 import useLocalize from '../hooks/useLocalize';
 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)} />
-          )}
+          <SendStatus activity={activity} className="timestamp" timestampClassName={timestampClassName} />
           <div className="filler" />
         </div>
       </div>

packages/component/src/Activity/Timestamp.js

@@ -9,14 +9,22 @@ import useStyleSet from '../hooks/useStyleSet';
 
 const Timestamp = ({ activity: { timestamp }, 'aria-hidden': ariaHidden, className }) => {
   const [{ timestampFormat }] = useStyleOptions();
-  const [{ timestamp: timestampStyleSet }] = useStyleSet();
+  const [{ timestamp: timestampStyleSet, sendStatus: sendStatusStyleSet }] = useStyleSet();
+
+  timestampStyleSet &&
+    console.warn(
+      'Web Chat: styleSet.timestamp is being deprecated. Please use styleSet.sendStatus. This deprecation migration will be removed on or after December 31, 2021.'
+    );
 
   if (!timestamp) {
     return false;
   }
 
   return (
-    <span aria-hidden={ariaHidden} className={classNames(timestampStyleSet + '', (className || '') + '')}>
+    <span
+      aria-hidden={ariaHidden}
+      className={classNames((timestampStyleSet || sendStatusStyleSet) + '', (className || '') + '')}
+    >
       {timestampFormat === 'relative' ? <RelativeTime value={timestamp} /> : <AbsoluteTime value={timestamp} />}
     </span>
   );

packages/component/src/Styles/createStyleSet.js

@@ -27,7 +27,6 @@ import createSuggestedActionsStyle from './StyleSet/SuggestedActions';
 import createSuggestedActionsStyleSet from './StyleSet/SuggestedActionsStyleSet';
 import createSuggestedActionStyle from './StyleSet/SuggestedAction';
 import createTextContentStyle from './StyleSet/TextContent';
-import createTimestampStyle from './StyleSet/Timestamp';
 import createTypingAnimationStyle from './StyleSet/TypingAnimation';
 import createTypingIndicatorStyle from './StyleSet/TypingIndicator';
 import createUploadAttachmentStyle from './StyleSet/UploadAttachment';
@@ -201,7 +200,6 @@ export default function createStyleSet(options) {
     suggestedAction: createSuggestedActionStyle(options),
     suggestedActions: createSuggestedActionsStyle(options),
     textContent: createTextContentStyle(options),
-    timestamp: createTimestampStyle(options),
     typingAnimation: createTypingAnimationStyle(options),
     typingIndicator: createTypingIndicatorStyle(options),
     uploadAttachment: createUploadAttachmentStyle(options),