Added BookmarksSidebar component

Summary:
This is another WIP. Here I construct a skeleton functional component which currently just displays that there is no bookmark information.

I have also placed the component into the layout.

Reviewed By: jknoxville

Differential Revision: D16419794

fbshipit-source-id: fe1722255bde2b8363e5514c284a242f077e5185

src/plugins/navigation/__tests__/testNavigationPlugin.node.js

@@ -12,12 +12,14 @@ import type {PersistedState} from '../';
 
 function constructPersistedStateMock(): PersistedState {
   return {
+    bookmarks: [],
     navigationEvents: [],
   };
 }
 
 function constructPersistedStateMockWithEvents(): PersistedState {
   return {
+    bookmarks: [],
     navigationEvents: [
       {
         uri: 'mock://this_is_a_mock_uri/mock/1',

src/plugins/navigation/components/BookmarksSidebar.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ * @flow strict-local
+ */
+
+import {DetailSidebar, FlexCenter, styled, colors} from 'flipper';
+
+import type {Bookmark} from '../';
+
+type Props = {|
+  bookmarks: Array<Bookmark>,
+|};
+
+const NoData = styled(FlexCenter)({
+  fontSize: 18,
+  color: colors.macOSTitleBarIcon,
+});
+
+export default (props: Props) => {
+  const {bookmarks} = props;
+  return (
+    <DetailSidebar>
+      {bookmarks.length === 0 ? <NoData grow>No Bookmarks</NoData> : null}
+    </DetailSidebar>
+  );
+};

src/plugins/navigation/components/index.js

@@ -6,6 +6,7 @@
  * @flow strict-local
  */
 
+export {default as BookmarksSidebar} from './BookmarksSidebar';
 export {default as FavoriteButton} from './FavoriteButton';
 export {default as IconButton} from './IconButton';
 export {default as NavigationInfoBox} from './NavigationInfoBox';

src/plugins/navigation/index.js

@@ -7,19 +7,28 @@
  */
 
 import {FlipperPlugin} from 'flipper';
-import {SearchBar, Timeline, ScrollableFlexColumn} from './components';
+import {
+  BookmarksSidebar,
+  SearchBar,
+  Timeline,
+  ScrollableFlexColumn,
+} from './components';
 
 type State = {||};
 
-type Data = {||};
-
 export type NavigationEvent = {|
   date: ?Date,
   uri: ?string,
 |};
 
+export type Bookmark = {|
+  uri: string,
+  commonName: ?string,
+|};
+
 export type PersistedState = {|
   navigationEvents: Array<NavigationEvent>,
+  bookmarks: Array<Bookmark>,
 |};
 
 export default class extends FlipperPlugin<State, {}, PersistedState> {
@@ -30,6 +39,7 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
 
   static defaultPersistedState: PersistedState = {
     navigationEvents: [],
+    bookmarks: [],
   };
 
   static persistedStateReducer = (
@@ -69,17 +79,15 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
   };
 
   render() {
-    const {persistedState} = this.props;
+    const {navigationEvents, bookmarks} = this.props.persistedState;
     return (
       <ScrollableFlexColumn>
         <SearchBar
           onNavigate={this.navigateTo}
           onFavorite={(query: string) => {}}
         />
-        <Timeline
-          events={persistedState.navigationEvents}
-          onNavigate={this.navigateTo}
-        />
+        <Timeline events={navigationEvents} onNavigate={this.navigateTo} />
+        <BookmarksSidebar bookmarks={bookmarks} />
       </ScrollableFlexColumn>
     );
   }