From 66bed1633321a55e120d4fa2020e52cd988a01b8 Mon Sep 17 00:00:00 2001
From: Benjamin Elo <beneloca@fb.com>
Date: Tue, 23 Jul 2019 09:45:16 -0700
Subject: [PATCH] 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
---
 .../navigation/components/BookmarksSidebar.js | 55 ++++++++++++++++++-
 src/plugins/navigation/index.js               |  2 +-
 2 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/src/plugins/navigation/components/BookmarksSidebar.js b/src/plugins/navigation/components/BookmarksSidebar.js
index 07b6ab63e..7c681871d 100644
--- a/src/plugins/navigation/components/BookmarksSidebar.js
+++ b/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>
   );
 };
diff --git a/src/plugins/navigation/index.js b/src/plugins/navigation/index.js
index 8cae0794d..932962846 100644
--- a/src/plugins/navigation/index.js
+++ b/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>
     );
   }