Added navigation ability to bookmarks sidebar

Summary: I've added the ability to navigate to different pages in the app via the bookmarks sidebar. Still no way to add bookmarks yet.

Reviewed By: jknoxville

Differential Revision: D16438415

fbshipit-source-id: f7dcda1add701eba8655518fba7cb9a82cf49ca1

src/plugins/navigation/components/BookmarksSidebar.js

@@ -12,6 +12,7 @@ import type {Bookmark} from '../';
 
 type Props = {|
   bookmarks: Array<Bookmark>,
+  onNavigate: string => void,
 |};
 
 const NoData = styled(FlexCenter)({
@@ -19,11 +20,61 @@ const NoData = styled(FlexCenter)({
   color: colors.macOSTitleBarIcon,
 });
 
+const BookmarksList = styled('div')({
+  color: colors.macOSTitleBarIcon,
+  overflowY: 'scroll',
+  overflowX: 'hidden',
+  height: '100%',
+  '.bookmark-container': {
+    width: '100%',
+    padding: '5px 10px',
+    cursor: 'pointer',
+  },
+  '.bookmark-container:hover': {
+    backgroundColor: 'rgba(155, 155, 155, 0.2)',
+  },
+  '.bookmark-container:active': {
+    backgroundColor: '#4d84f5',
+    color: '#FFF',
+  },
+  '.bookmark-common-name': {
+    fontSize: 14,
+    overflowX: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    lineHeight: 1.2,
+  },
+  '.bookmark-uri': {
+    fontSize: 10,
+    overflowX: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    lineHeight: 1.2,
+  },
+});
+
 export default (props: Props) => {
-  const {bookmarks} = props;
+  const {bookmarks, onNavigate} = props;
   return (
     <DetailSidebar>
-      {bookmarks.length === 0 ? <NoData grow>No Bookmarks</NoData> : null}
+      {bookmarks.length === 0 ? (
+        <NoData grow>No Bookmarks</NoData>
+      ) : (
+        <BookmarksList>
+          {bookmarks.map(bookmark => (
+            <div
+              className="bookmark-container"
+              role="button"
+              tabIndex={0}
+              onClick={() => {
+                onNavigate(bookmark.uri);
+              }}>
+              <div className="bookmark-common-name">{bookmark.commonName}</div>
+              <div className="bookmark-uri">{bookmark.uri}</div>
+            </div>
+          ))}
+        </BookmarksList>
+      )}
     </DetailSidebar>
   );
 };

src/plugins/navigation/index.js

@@ -87,7 +87,7 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
           onFavorite={(query: string) => {}}
         />
         <Timeline events={navigationEvents} onNavigate={this.navigateTo} />
-        <BookmarksSidebar bookmarks={bookmarks} />
+        <BookmarksSidebar bookmarks={bookmarks} onNavigate={this.navigateTo} />
       </ScrollableFlexColumn>
     );
   }