Hide separator for last document list entry

ts/components/conversation/media-gallery/AttachmentSection.tsx

@@ -48,7 +48,8 @@ export class AttachmentSection extends React.Component<Props, {}> {
   private renderItems() {
     const { i18n, messages, type } = this.props;
 
-    return messages.map(message => {
+    return messages.map((message, index, array) => {
+      const isLast = index === array.length - 1;
       const { attachments } = message;
       const firstAttachment = attachments[0];
 
@@ -66,11 +67,12 @@ export class AttachmentSection extends React.Component<Props, {}> {
           return (
             <DocumentListItem
               key={message.id}
-              i18n={i18n}
-              fileSize={firstAttachment.size}
               fileName={firstAttachment.fileName}
-              timestamp={message.received_at}
+              fileSize={firstAttachment.size}
+              i18n={i18n}
+              isLast={isLast}
               onClick={onClick}
+              timestamp={message.received_at}
             />
           );
         default:

ts/components/conversation/media-gallery/DocumentListItem.tsx

@@ -7,6 +7,7 @@ interface Props {
   fileName?: string | null;
   fileSize?: number;
   i18n: (key: string, values?: Array<string>) => string;
+  isLast: boolean;
   onClick?: () => void;
   timestamp: number;
 }
@@ -15,6 +16,8 @@ const styles = {
   container: {
     width: '100%',
     height: 72,
+  },
+  containerSeparator: {
     borderBottomWidth: 1,
     borderBottomColor: '#ccc',
     borderBottomStyle: 'solid',
@@ -78,6 +81,16 @@ export class DocumentListItem extends React.Component<Props, {}> {
   }
 
   public render() {
-    return <div style={styles.container}>{this.renderContent()}</div>;
+    const { isLast } = this.props;
+    return (
+      <div
+        style={{
+          ...styles.container,
+          ...(isLast ? {} : styles.containerSeparator),
+        }}
+      >
+        {this.renderContent()}
+      </div>
+    );
   }
 }

ts/components/conversation/media-gallery/MediaGallery.md

@@ -74,3 +74,14 @@ const messages = _.sortBy(
 
 <MediaGallery i18n={window.i18n} media={messages} documents={messages} />;
 ```
+
+## Media gallery with one document
+
+```jsx
+const messages = [
+  {
+    attachments: [{ fileName: 'foo.jpg', contentType: 'application/json' }],
+  },
+];
+<MediaGallery i18n={window.i18n} media={messages} documents={messages} />;
+```