Remove download links from user-uploaded attachments without thumbnai…

…ls (#2262)

* Add upload attachment renderer

* Check thumbnail

* Update PR number

* Fix propTypes

* Fix render error for text attachment

* Update non-photo upload PNGs

CHANGELOG.md

@@ -56,6 +56,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fix [#2160](https://github.com/microsoft/BotFramework-WebChat/issues/2160). Clear suggested actions after clicking on a suggested actions of type `openUrl`, by [@tdurnford](https://github.com/tdurnford) in PR [#2190](https://github.com/microsoft/BotFramework-WebChat/pull/2190)
 -  Fix [#1954](https://github.com/microsoft/BotFramework-WebChat/issues/1954). Estimate clock skew and adjust timestamp for outgoing activity, by [@compulim](https://github.com/compulim) in PR [#2208](https://github.com/microsoft/BotFramework-WebChat/pull/2208)
 -  Fix [#2240](https://github.com/microsoft/BotFramework-WebChat/issues/2240). Fix microphone button should be re-enabled after error, by [@compulim](https://github.com/compulim) in PR [#2241](https://github.com/microsoft/BotFramework-WebChat/pull/2241)
+-  Fix [#2250](https://github.com/microsoft/BotFramework-WebChat/issues/2250). Fix React warnings related prop types, by [@compulim](https://github.com/compulim) in PR [#2253](https://github.com/microsoft/BotFramework-WebChat/pull/2253)
+-  Fix [#2248](https://github.com/microsoft/BotFramework-WebChat/issues/2248). Remove download links from user-uploaded attachment without thumbnails, by [@compulim](https://github.com/compulim) in PR [#2262](https://github.com/microsoft/BotFramework-WebChat/pull/2262)
 
 ### Added
 

packages/component/src/Attachment/UploadAttachment.js

@@ -0,0 +1,53 @@
+import { css } from 'glamor';
+import { format } from 'bytes';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import connectToWebChat from '../connectToWebChat';
+import { localize } from '../Localization/Localize';
+
+const ROOT_CSS = css({
+  display: 'flex',
+  flexDirection: 'column'
+});
+
+const UploadAttachment = ({
+  activity: { attachments = [], channelData: { attachmentSizes = [] } = {} } = {},
+  attachment,
+  language,
+  styleSet
+}) => {
+  const attachmentIndex = attachments.indexOf(attachment);
+  const size = attachmentSizes[attachmentIndex];
+  const formattedSize = typeof size === 'number' && format(size);
+  const uploadFileWithFileSizeLabel = localize('UploadFileWithFileSize', language, attachment.name, formattedSize);
+  return (
+    <React.Fragment>
+      {/* Because of differences in browser implementations, <span aria-label> is used to make the screen reader perform the same on different browsers in Edge v44 */}
+      <span aria-label={uploadFileWithFileSizeLabel} />
+      <div aria-hidden={true} className={classNames(ROOT_CSS + '', styleSet.uploadAttachment + '')}>
+        <div className="name">{attachment.name}</div>
+        <div className="size">{formattedSize}</div>
+      </div>
+    </React.Fragment>
+  );
+};
+
+UploadAttachment.propTypes = {
+  activity: PropTypes.shape({
+    attachment: PropTypes.array,
+    channelData: PropTypes.shape({
+      attachmentSizes: PropTypes.arrayOf(PropTypes.number)
+    })
+  }).isRequired,
+  attachment: PropTypes.shape({
+    name: PropTypes.string.isRequired
+  }).isRequired,
+  language: PropTypes.string.isRequired,
+  styleSet: PropTypes.shape({
+    downloadAttachment: PropTypes.any.isRequired
+  }).isRequired
+};
+
+export default connectToWebChat(({ language, styleSet }) => ({ language, styleSet }))(UploadAttachment);

packages/component/src/Localization/en-US.js

@@ -42,6 +42,10 @@ function downloadFileWithFileSize(downloadFileText, fileName, size) {
   return `${downloadFileText} ${fileName} of size ${size}`;
 }
 
+function uploadFileWithFileSize(fileName, size) {
+  return `${fileName} of size ${size}`;
+}
+
 function userSaidSomething(avatarInitials, text) {
   return `User ${avatarInitials} said, ${text}`;
 }
@@ -84,6 +88,7 @@ export default {
   'Type your message': 'Type your message',
   TypingIndicator: 'Showing typing indicator',
   'Upload file': 'Upload file',
+  UploadFileWithFileSize: uploadFileWithFileSize,
   UserSent: 'User sent: ',
   VAT: 'VAT'
 };

packages/component/src/Middleware/Attachment/createCoreMiddleware.js

@@ -4,16 +4,25 @@ import React from 'react';
 import AudioAttachment from '../../Attachment/AudioAttachment';
 import DownloadAttachment from '../../Attachment/DownloadAttachment';
 import ImageAttachment from '../../Attachment/ImageAttachment';
+import UploadAttachment from '../../Attachment/UploadAttachment';
 import TextAttachment from '../../Attachment/TextAttachment';
 import TypingActivity from '../../Attachment/TypingActivity';
 import VideoAttachment from '../../Attachment/VideoAttachment';
 
+function hasThumbnail({ attachments = [], channelData: { attachmentThumbnails = [] } = {} }, attachment) {
+  const attachmentIndex = attachments.indexOf(attachment);
+
+  return !!attachmentThumbnails[attachmentIndex];
+}
+
 // TODO: [P4] Rename this file or the whole middleware, it looks either too simple or too comprehensive now
 export default function createCoreMiddleware() {
   return () => next => {
     const Attachment = ({ activity = {}, attachment, attachment: { contentType, contentUrl } = {} }) =>
       activity.type === 'typing' ? (
         <TypingActivity />
+      ) : activity.from.role === 'user' && !/^text\//u.test(contentType) && !hasThumbnail(activity, attachment) ? (
+        <UploadAttachment activity={activity} attachment={attachment} />
       ) : /^audio\//u.test(contentType) ? (
         <AudioAttachment activity={activity} attachment={attachment} />
       ) : /^image\//u.test(contentType) ? (

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

@@ -0,0 +1,12 @@
+export default function createUploadAttachmentStyle({ accent, bubbleTextColor, paddingRegular, primaryFont }) {
+  return {
+    color: bubbleTextColor,
+    fontFamily: primaryFont,
+    padding: paddingRegular,
+    textDecoration: 'none',
+
+    '& > .name': {
+      color: accent
+    }
+  };
+}

packages/component/src/Styles/createStyleSet.js

@@ -29,6 +29,7 @@ import createTextContentStyle from './StyleSet/TextContent';
 import createTimestampStyle from './StyleSet/Timestamp';
 import createTypingActivityStyle from './StyleSet/TypingActivity';
 import createTypingAnimationStyle from './StyleSet/TypingAnimation';
+import createUploadAttachmentStyle from './StyleSet/UploadAttachment';
 import createUploadButtonStyle from './StyleSet/UploadButton';
 import createVideoAttachmentStyle from './StyleSet/VideoAttachment';
 import createVideoContentStyle from './StyleSet/VideoContent';
@@ -143,6 +144,7 @@ export default function createStyleSet(options) {
     timestamp: createTimestampStyle(options),
     typingActivity: createTypingActivityStyle(options),
     typingAnimation: createTypingAnimationStyle(options),
+    uploadAttachment: createUploadAttachmentStyle(options),
     uploadButton: createUploadButtonStyle(options),
     videoAttachment: createVideoAttachmentStyle(options),
     videoContent: createVideoContentStyle(options),