Merge branch 'release-4.7' into ICU-737

components/file_attachment.jsx

@@ -93,14 +93,15 @@ export default class FileAttachment extends React.PureComponent {
 
  onAttachmentClick = (e) => {
  e.preventDefault();
- this.props.handleImageClick(this.props.index);
+ if (this.props.handleImageClick) {
+ this.props.handleImageClick(this.props.index);
+ }
  }
 
  render() {
  const {
  compactDisplay,
- fileInfo,
- index
+ fileInfo
  } = this.props;
 
  const trimmedFilename = trimFilename(fileInfo.name);
@@ -137,8 +138,8 @@ export default class FileAttachment extends React.PureComponent {
  fileInfo={fileInfo}
  compactDisplay={compactDisplay}
  canDownload={canDownload}
+ handleImageClick={this.onAttachmentClick}
  iconClass={'post-image__download'}
- index={index}
  >
  <DownloadIcon/>
  </FilenameOverlay>

components/file_attachment/filename_overlay.jsx

@@ -18,11 +18,6 @@ export default class FilenameOverlay extends React.PureComponent {
  */
  fileInfo: PropTypes.object.isRequired,
 
- /*
- * The index of this attachment preview in the parent FileAttachmentList
- */
- index: PropTypes.number.isRequired,
-
  /*
  * Handler for when the thumbnail is clicked passed the index above
  */
@@ -49,17 +44,13 @@ export default class FilenameOverlay extends React.PureComponent {
  iconClass: PropTypes.string
  };
 
- onAttachmentClick = (e) => {
- e.preventDefault();
- this.props.handleImageClick(this.props.index);
- }
-
  render() {
  const {
  canDownload,
  children,
  compactDisplay,
  fileInfo,
+ handleImageClick,
  iconClass
  } = this.props;
 
@@ -78,7 +69,7 @@ export default class FilenameOverlay extends React.PureComponent {
  >
  <a
  href='#'
- onClick={this.onAttachmentClick}
+ onClick={handleImageClick}
  className='post-image__name'
  rel='noopener noreferrer'
  >

components/file_attachment_list/file_attachment_list.jsx

@@ -80,6 +80,10 @@ export default class FileAttachmentList extends React.Component {
  />
  );
  }
+ } else if (fileCount === 1) {
+ return (
+ <div style={{minHeight: '385px'}}/>
+ );
  }
 
  if (fileInfos && fileInfos.length > 0) {

components/single_image_view.jsx

@@ -12,6 +12,8 @@ import {
  localizeMessage
 } from 'utils/utils';
 
+import {postListScrollChange} from 'actions/global_actions.jsx';
+
 import LoadingImagePreview from 'components/loading_image_preview';
 import ViewImageModal from 'components/view_image.jsx';
 
@@ -48,6 +50,9 @@ export default class SingleImageView extends React.PureComponent {
  window.addEventListener('resize', this.handleResize);
  this.setViewPortWidth();
  this.loadImage(this.props.fileInfo);
+
+ // Timeout used to delay execution until after current render cycle
+ setTimeout(postListScrollChange, 0);
  }
 
  componentWillReceiveProps(nextProps) {
@@ -103,14 +108,14 @@ export default class SingleImageView extends React.PureComponent {
  this.fileImage = node;
  }
 
- computeImageDimension() {
+ computeImageDimensions = () => {
  const {fileInfo} = this.props;
  const {viewPortWidth} = this.state;
 
  let previewWidth = fileInfo.width;
  let previewHeight = fileInfo.height;
 
- if (previewWidth > viewPortWidth) {
+ if (viewPortWidth && previewWidth > viewPortWidth) {
  const origRatio = fileInfo.height / fileInfo.width;
  previewWidth = Math.floor(Math.min(PREVIEW_IMAGE_MAX_WIDTH, fileInfo.width, viewPortWidth));
  previewHeight = Math.floor(previewWidth * origRatio);
@@ -129,10 +134,7 @@ export default class SingleImageView extends React.PureComponent {
  const {fileInfo} = this.props;
  const {loaded} = this.state;
 
- const {
- previewWidth,
- previewHeight
- } = this.computeImageDimension();
+ const {previewHeight, previewWidth} = this.computeImageDimensions();
 
  let minPreviewClass = '';
  if (
@@ -169,8 +171,8 @@ export default class SingleImageView extends React.PureComponent {
  let loadingImagePreview;
 
  let fadeInClass = '';
- let imageLoadedDimension = {width: previewWidth, height: previewHeight};
- let imageContainerDimension = {width: previewWidth, height: previewHeight};
+ let imageStyle = {height: previewHeight};
+ const imageContainerStyle = {height: previewHeight};
  if (loaded) {
  viewImageModal = (
  <ViewImageModal
@@ -181,8 +183,7 @@ export default class SingleImageView extends React.PureComponent {
  );
 
  fadeInClass = 'image-fade-in';
- imageLoadedDimension = {cursor: 'pointer'};
- imageContainerDimension = {};
+ imageStyle = {cursor: 'pointer'};
  } else {
  loadingImagePreview = (
  <LoadingImagePreview
@@ -203,13 +204,15 @@ export default class SingleImageView extends React.PureComponent {
  >
  {fileHeader}
  <div
- style={imageContainerDimension}
  className='image-container'
  >
- <div className={`image-loaded ${fadeInClass}`}>
+ <div
+ className={`image-loaded ${fadeInClass}`}
+ style={imageContainerStyle}
+ >
  <img
  ref={this.setImageLoadedRef}
- style={imageLoadedDimension}
+ style={imageStyle}
  className={`${minPreviewClass} ${svgClass}`}
  onClick={this.handleImageClick}
  />

sass/layout/_post.scss

@@ -288,7 +288,7 @@
  position: absolute;
  text-align: center;
  visibility: hidden;
- z-index: 1;
+ z-index: 3;
 
  .fa {
  font-size: 1.2em;

tests/components/__snapshots__/file_attachment.test.jsx.snap

@@ -61,8 +61,8 @@ exports[`component/FileAttachment should match snapshot, after change from file
  "width": 600,
  }
  }
+ handleImageClick={[Function]}
  iconClass="post-image__download"
- index={3}
  >
  <DownloadIcon />
  </FilenameOverlay>
@@ -127,8 +127,8 @@ exports[`component/FileAttachment should match snapshot, file with long name 1`]
  "size": 100,
  }
  }
+ handleImageClick={[Function]}
  iconClass="post-image__download"
- index={3}
  >
  <DownloadIcon />
  </FilenameOverlay>
@@ -193,8 +193,8 @@ exports[`component/FileAttachment should match snapshot, regular file 1`] = `
  "size": 100,
  }
  }
+ handleImageClick={[Function]}
  iconClass="post-image__download"
- index={3}
  >
  <DownloadIcon />
  </FilenameOverlay>
@@ -263,8 +263,8 @@ exports[`component/FileAttachment should match snapshot, regular image 1`] = `
  "width": 600,
  }
  }
+ handleImageClick={[Function]}
  iconClass="post-image__download"
- index={3}
  >
  <DownloadIcon />
  </FilenameOverlay>
@@ -333,8 +333,8 @@ exports[`component/FileAttachment should match snapshot, small image 1`] = `
  "width": 16,
  }
  }
+ handleImageClick={[Function]}
  iconClass="post-image__download"
- index={3}
  >
  <DownloadIcon />
  </FilenameOverlay>
@@ -403,8 +403,8 @@ exports[`component/FileAttachment should match snapshot, svg image 1`] = `
  "width": 600,
  }
  }
+ handleImageClick={[Function]}
  iconClass="post-image__download"
- index={3}
  >
  <DownloadIcon />
  </FilenameOverlay>
@@ -462,8 +462,8 @@ exports[`component/FileAttachment should match snapshot, when file is not loaded
  "size": 100,
  }
  }
+ handleImageClick={[Function]}
  iconClass="post-image__download"
- index={3}
  >
  <DownloadIcon />
  </FilenameOverlay>
@@ -529,8 +529,8 @@ exports[`component/FileAttachment should match snapshot, with compact display 1`
  "size": 100,
  }
  }
+ handleImageClick={[Function]}
  iconClass="post-image__download"
- index={3}
  >
  <DownloadIcon />
  </FilenameOverlay>

tests/components/file_attachment/__snapshots__/filename_overlay.test.jsx.snap

@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/file_attachment/FilenameOverlay should match snapshot, compact display 1`] = `
+<OverlayTrigger
+ defaultOverlayShown={false}
+ delayShow={1000}
+ overlay={
+ <Tooltip
+ bsClass="tooltip"
+ id="file-name__tooltip"
+ placement="right"
+ >
+ test_filename
+ </Tooltip>
+ }
+ placement="top"
+ trigger={
+ Array [
+ "hover",
+ "focus",
+ ]
+ }
+>
+ <a
+ className="post-image__name"
+ href="#"
+ onClick={[MockFunction]}
+ rel="noopener noreferrer"
+ >
+ <AttachmentIcon
+ className="icon"
+ />
+ test_filename
+ </a>
+</OverlayTrigger>
+`;
+
+exports[`components/file_attachment/FilenameOverlay should match snapshot, standard but not downloadable 1`] = `
+<span
+ className="post-image__name"
+>
+ test_filename
+</span>
+`;
+
+exports[`components/file_attachment/FilenameOverlay should match snapshot, standard display 1`] = `
+<a
+ className="post-image__name"
+ download="test_filename"
+ href="/api/v4/files/thumbnail_id"
+ rel="noopener noreferrer"
+ target="_blank"
+>
+ <OverlayTrigger
+ defaultOverlayShown={false}
+ delayShow={1000}
+ overlay={
+ <Tooltip
+ bsClass="tooltip"
+ id="file-name__tooltip"
+ placement="right"
+ >
+ Download
+ </Tooltip>
+ }
+ placement="top"
+ trigger={
+ Array [
+ "hover",
+ "focus",
+ ]
+ }
+ >
+ test_filename
+ </OverlayTrigger>
+</a>
+`;
+
+exports[`components/file_attachment/FilenameOverlay should match snapshot, with Download icon as children 1`] = `
+<a
+ className="post-image__name"
+ download="test_filename"
+ href="/api/v4/files/thumbnail_id"
+ rel="noopener noreferrer"
+ target="_blank"
+>
+ <OverlayTrigger
+ defaultOverlayShown={false}
+ delayShow={1000}
+ overlay={
+ <Tooltip
+ bsClass="tooltip"
+ id="file-name__tooltip"
+ placement="right"
+ >
+ Download
+ </Tooltip>
+ }
+ placement="top"
+ trigger={
+ Array [
+ "hover",
+ "focus",
+ ]
+ }
+ >
+ <DownloadIcon />
+ </OverlayTrigger>
+</a>
+`;