From 13fc0bec272e5f599f9426d553cbf558923fef03 Mon Sep 17 00:00:00 2001
From: Benjamin Elo <beneloca@fb.com>
Date: Mon, 12 Aug 2019 05:51:56 -0700
Subject: [PATCH] Minor improvements to Timeline view

Summary: Fixed issue with the timeline not having a key prop, and added some text when there are no navigation events.

Reviewed By: jknoxville, passy

Differential Revision: D16762034

fbshipit-source-id: 8f4618c8365c1a8b5a18b6176e1d80fc401f3ca5
---
 src/plugins/navigation/components/Timeline.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/plugins/navigation/components/Timeline.js b/src/plugins/navigation/components/Timeline.js
index 18ddabbd8..4220f3714 100644
--- a/src/plugins/navigation/components/Timeline.js
+++ b/src/plugins/navigation/components/Timeline.js
@@ -6,7 +6,7 @@
  * @flow strict-local
  */
 
-import {styled} from 'flipper';
+import {colors, FlexCenter, styled} from 'flipper';
 import {NavigationInfoBox} from './';
 
 import type {Bookmark, NavigationEvent} from '../flow-types';
@@ -23,13 +23,23 @@ const TimelineContainer = styled('div')({
   flexGrow: 1,
 });
 
+const NoData = styled(FlexCenter)({
+  height: '100%',
+  fontSize: 18,
+  backgroundColor: colors.macOSTitleBarBackgroundBlur,
+  color: colors.macOSTitleBarIcon,
+});
+
 export default (props: Props) => {
   const {bookmarks, events, onNavigate, onFavorite} = props;
-  return (
+  return events.length === 0 ? (
+    <NoData>No Navigation Events to Show</NoData>
+  ) : (
     <TimelineContainer>
-      {events.map((event: NavigationEvent) => {
+      {events.map((event: NavigationEvent, idx) => {
         return (
           <NavigationInfoBox
+            key={idx}
             isBookmarked={event.uri != null ? bookmarks.has(event.uri) : false}
             uri={event.uri}
             onNavigate={onNavigate}