2 files changed, 143 insertions, 0 deletions
diff --git a/webapp/components/file_attachment_list/file_attachment_list.jsx b/webapp/components/file_attachment_list/file_attachment_list.jsx
new file mode 100644
index 000000000..31b1ac424
--- /dev/null
+++ b/webapp/components/file_attachment_list/file_attachment_list.jsx
@@ -0,0 +1,104 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import ViewImageModal from 'components/view_image.jsx';
+import FileAttachment from 'components/file_attachment.jsx';
+import Constants from 'utils/constants.jsx';
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+
+export default class FileAttachmentList extends React.Component {
+    static propTypes = {
+
+        /*
+         * The post the files are attached to
+         */
+        post: PropTypes.object.isRequired,
+
+        /*
+         * The number of files attached to the post
+         */
+        fileCount: PropTypes.number.isRequired,
+
+        /*
+         * Array of metadata for each file attached to the post
+         */
+        fileInfos: PropTypes.arrayOf(PropTypes.object),
+
+        /*
+         * Set to render compactly
+         */
+        compactDisplay: PropTypes.bool,
+
+        actions: PropTypes.shape({
+
+            /*
+             * Function to get file metadata for a post
+             */
+            getMissingFilesForPost: PropTypes.func.isRequired
+        }).isRequired
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.handleImageClick = this.handleImageClick.bind(this);
+
+        this.state = {showPreviewModal: false, startImgIndex: 0};
+    }
+
+    componentDidMount() {
+        if (this.props.post.file_ids || this.props.post.filenames) {
+            this.props.actions.getMissingFilesForPost(this.props.post.id);
+        }
+    }
+
+    handleImageClick(indexClicked) {
+        this.setState({showPreviewModal: true, startImgIndex: indexClicked});
+    }
+
+    render() {
+        const postFiles = [];
+        if (this.props.fileInfos && this.props.fileInfos.length > 0) {
+            for (let i = 0; i < Math.min(this.props.fileInfos.length, Constants.MAX_DISPLAY_FILES); i++) {
+                const fileInfo = this.props.fileInfos[i];
+
+                postFiles.push(
+                    <FileAttachment
+                        key={fileInfo.id}
+                        fileInfo={this.props.fileInfos[i]}
+                        index={i}
+                        handleImageClick={this.handleImageClick}
+                        compactDisplay={this.props.compactDisplay}
+                    />
+                );
+            }
+        } else if (this.props.fileCount > 0) {
+            for (let i = 0; i < Math.min(this.props.fileCount, Constants.MAX_DISPLAY_FILES); i++) {
+                // Add a placeholder to avoid pop-in once we get the file infos for this post
+                postFiles.push(
+                    <div
+                        key={`fileCount-${i}`}
+                        className='post-image__column post-image__column--placeholder'
+                    />
+            );
+            }
+        }
+
+        return (
+            <div>
+                <div className='post-image__columns clearfix'>
+                    {postFiles}
+                </div>
+                <ViewImageModal
+                    show={this.state.showPreviewModal}
+                    onModalDismissed={() => this.setState({showPreviewModal: false})}
+                    startId={this.state.startImgIndex}
+                    fileInfos={this.props.fileInfos}
+                />
+            </div>
+        );
+    }
+}
diff --git a/webapp/components/file_attachment_list/index.js b/webapp/components/file_attachment_list/index.js
new file mode 100644
index 000000000..4081e4220
--- /dev/null
+++ b/webapp/components/file_attachment_list/index.js
@@ -0,0 +1,39 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {getMissingFilesForPost} from 'mattermost-redux/actions/files';
+import {makeGetFilesForPost} from 'mattermost-redux/selectors/entities/files';
+
+import FileAttachmentList from './file_attachment_list.jsx';
+
+function makeMapStateToProps() {
+    const selectFilesForPost = makeGetFilesForPost();
+    return function mapStateToProps(state, ownProps) {
+        const fileInfos = selectFilesForPost(state, ownProps.post);
+
+        let fileCount = 0;
+        if (ownProps.post.file_ids) {
+            fileCount = ownProps.post.file_ids.length;
+        } else if (this.props.post.filenames) {
+            fileCount = ownProps.post.filenames.length;
+        }
+
+        return {
+            ...ownProps,
+            fileInfos,
+            fileCount
+        };
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            getMissingFilesForPost
+        }, dispatch)
+    };
+}
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(FileAttachmentList);