Wire up media gallery empty state

_locales/en/messages.json

@@ -326,10 +326,18 @@
       "message": "Media",
       "description": "Header of the default pane in the media gallery, showing images and videos"
     },
+    "mediaEmptyState": {
+      "message": "You don’t have any media in this conversation",
+      "description": "Message shown to user in the media gallery when there are no messages with media attachments (images or video)"
+    },
     "documents": {
       "message": "Documents",
       "description": "Header of the secondary pane in the media gallery, showing every non-media attachment"
     },
+    "documentsEmptyState": {
+      "message": "You don’t have any documents in this conversation",
+      "description": "Message shown to user in the media gallery when there are no messages with document attachments (anything other than images or video)"
+    },
     "messageCaption": {
       "message": "Message caption",
       "description": "Prefix of attachment alt tags in the media gallery"

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

@@ -1,3 +1,17 @@
+### Empty states for missing media and documents
+
+```
+<div style={{width: '100%', height: 300}}>
+  <MediaGallery
+    i18n={window.i18n}
+    media={[]}
+    documents={[]}
+  />
+</div>
+```
+
+### Media gallery with media and documents
+
 ```jsx
 const DAY_MS = 24 * 60 * 60 * 1000;
 const MONTH_MS = 30 * DAY_MS;

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

@@ -7,9 +7,11 @@ import moment from 'moment';
 
 import { AttachmentSection } from './AttachmentSection';
 import { AttachmentType } from './types/AttachmentType';
+import { EmptyState } from './EmptyState';
 import { groupMessagesByDate } from './groupMessagesByDate';
 import { ItemClickEvent } from './types/ItemClickEvent';
 import { Message } from './types/Message';
+import { missingCaseError } from '../../../util/missingCaseError';
 
 interface Props {
   documents: Array<Message>;
@@ -135,7 +137,19 @@ export class MediaGallery extends React.Component<Props, State> {
     const type = selectedTab;
 
     if (!messages || messages.length === 0) {
-      return null;
+      const label = (() => {
+        switch (type) {
+          case 'media':
+            return i18n('mediaEmptyState');
+
+          case 'documents':
+            return i18n('documentsEmptyState');
+
+          default:
+            throw missingCaseError(type);
+        }
+      })();
+      return <EmptyState data-test="EmptyState" label={label} />;
     }
 
     const now = Date.now();