Added NavigationInfoBox component

Summary:
Here I added an info box to display the info of the incoming navigation events.

The component is currently missing interaction (navigating to uris and favoriting), but I will add that in my next diff.

While I was here, I modified the component file structure a tiny bit to make importing components easier.

Reviewed By: jknoxville

Differential Revision: D16357204

fbshipit-source-id: 70b137e052181559a2fda02b091a71e54cb1ade0

src/plugins/navigation/components/NavigationInfoBox.js

@@ -0,0 +1,70 @@
+/**
+ * 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 {styled} from 'flipper';
+import {parseURIParameters} from '../util/uri';
+
+type Props = {|
+  uri: ?string,
+  onNavigate: (query: string) => void,
+  onFavorite: (query: string) => void,
+|};
+
+const NavigationInfoBoxContainer = styled('div')({
+  backgroundColor: '#FDFDEA',
+  maxWidth: 500,
+  height: 'fit-content',
+  padding: 20,
+  borderRadius: 10,
+  margin: 20,
+  width: 'fit-content',
+  position: 'relative',
+  '.nav-info-text': {
+    color: '#707070',
+    fontSize: '1.2em',
+    lineHeight: '1.25em',
+  },
+  '.nav-info-text.bold': {
+    fontWeight: 'bold',
+    marginTop: '10px',
+  },
+  '.nav-info-text.selectable': {
+    userSelect: 'text',
+    cursor: 'text',
+  },
+});
+
+export default (props: Props) => {
+  const {uri} = props;
+  if (uri == null) {
+    return (
+      <NavigationInfoBoxContainer>
+        <div className="nav-info-text">View has no URI information</div>
+      </NavigationInfoBoxContainer>
+    );
+  } else {
+    const parameters = parseURIParameters(uri);
+    return (
+      <NavigationInfoBoxContainer>
+        <div className="nav-info-text bold">uri:</div>
+        <div className="nav-info-text selectable">{uri}</div>
+        {parameters.size > 0 ? (
+          <>
+            <div className="nav-info-text bold">parameters:</div>
+            {Array.from(parameters, ([key, value]) => (
+              <div key={key} className="nav-info-text selectable">
+                {key}
+                {value ? `: ${value}` : ''}
+              </div>
+            ))}
+          </>
+        ) : null}
+      </NavigationInfoBoxContainer>
+    );
+  }
+};

src/plugins/navigation/components/SearchBar.js

@@ -14,7 +14,7 @@ import {
   Toolbar,
   Glyph,
 } from 'flipper';
-import SearchBarButton from './SearchBarButton';
+import {SearchBarButton} from './';
 
 type Props = {|
   onFavorite: (query: string) => void,

src/plugins/navigation/components/index.js

@@ -0,0 +1,11 @@
+/**
+ * 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
+ */
+
+export {default as NavigationInfoBox} from './NavigationInfoBox';
+export {default as SearchBar} from './SearchBar';
+export {default as SearchBarButton} from './SearchBarButton';

src/plugins/navigation/index.js

@@ -7,7 +7,7 @@
  */
 
 import {FlipperPlugin, FlexColumn} from 'flipper';
-import SearchBar from './components/SearchBar';
+import {SearchBar} from './components';
 
 type State = {||};
 

src/plugins/navigation/util/uri.js

@@ -0,0 +1,25 @@
+/**
+ * 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 querystring from 'querystring';
+
+export const parseURIParameters: string => Map<string, string> = (
+  query: string,
+) => {
+  // get parameters from query string and store in Map
+  const parameters = query
+    .split('?')
+    .splice(1)
+    .join('');
+  const parametersObj = querystring.parse(parameters);
+  const parametersMap = new Map<string, string>();
+  for (const key in parametersObj) {
+    parametersMap.set(key, parametersObj[key]);
+  }
+  return parametersMap;
+};