Added search bar to navigation plugin

Summary:
Here I've started work on a search bar for the top of my plugin. Currently it supports navigation in a device by typing in an app uri and pressing the enter key or by pressing the send icon.

More features will be added as other components for this plugin are added. I have added a function stub for the bookmark button for now and the drop down icon is purely cosmetic at the moment.

Reviewed By: jknoxville

Differential Revision: D16183223

fbshipit-source-id: 0313d8c6e3a967c9400b9e9d3f24960e6a021a8c

src/plugins/navigation/components/SearchBar.js

@@ -0,0 +1,79 @@
+/**
+ * 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 {
+  Component,
+  styled,
+  SearchBox,
+  SearchInput,
+  Toolbar,
+  Glyph,
+} from 'flipper';
+import SearchBarButton from './SearchBarButton';
+
+type Props = {|
+  onFavorite: (query: string) => void,
+  onNavigate: (query: string) => void,
+|};
+
+type State = {|
+  query: string,
+|};
+
+const SearchChevronContainer = styled('div')({
+  marginRight: 12,
+});
+
+class SearchBar extends Component<Props, State> {
+  state = {
+    query: '',
+  };
+
+  favorite = (query: string) => {
+    this.props.onFavorite(query);
+  };
+
+  navigateTo = (query: string) => {
+    this.props.onNavigate(query);
+  };
+
+  queryInputChanged = (event: SyntheticInputEvent<>) => {
+    this.setState({query: event.target.value});
+  };
+
+  render = () => {
+    return (
+      <Toolbar>
+        <SearchBox>
+          <SearchInput
+            onChange={this.queryInputChanged}
+            onKeyPress={e => {
+              if (e.key === 'Enter') {
+                this.navigateTo(this.state.query);
+              }
+            }}
+            placeholder="Navigate To..."
+          />
+          <SearchChevronContainer>
+            <Glyph name="chevron-down" size={12} />
+          </SearchChevronContainer>
+        </SearchBox>
+        <SearchBarButton
+          icon="send"
+          onClick={() => this.navigateTo(this.state.query)}
+        />
+        <SearchBarButton
+          icon="star"
+          onClick={() => this.favorite(this.state.query)}
+        />
+      </Toolbar>
+    );
+  };
+}
+
+export default SearchBar;

src/plugins/navigation/components/SearchBarButton.js

@@ -0,0 +1,28 @@
+/**
+ * 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
+ */
+
+import {Glyph, styled} from 'flipper';
+
+type Props = {|
+  icon: string,
+  onClick?: () => void,
+|};
+
+const SearchBarButton = styled('div')({
+  marginRight: 9,
+  marginTop: -3,
+  marginLeft: 4,
+  position: 'relative',
+});
+
+export default function(props: Props) {
+  return (
+    <SearchBarButton onClick={props.onClick}>
+      <Glyph name={props.icon} size={16} variant="outline" />
+    </SearchBarButton>
+  );
+}

src/plugins/navigation/index.js

@@ -7,6 +7,7 @@
  */
 
 import {FlipperPlugin, FlexColumn} from 'flipper';
+import SearchBar from './components/SearchBar';
 
 type State = {||};
 
@@ -43,12 +44,19 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
     }
   };
 
+  navigateTo = (query: string) => {
+    this.getDevice().then(device => {
+      device.navigateToLocation(query);
+    });
+  };
+
   render() {
     return (
       <FlexColumn>
-        {this.props.persistedState.data.map((d, i) => (
+        <SearchBar
-          <div key={i}>{JSON.stringify(d)}</div>
+          onNavigate={this.navigateTo}
-        ))}
+          onFavorite={(query: string) => {}}
+        />
       </FlexColumn>
     );
   }