Add databases plugin v0 (android) (#441)

Summary:
Adds a plugin for listing the databases, tables and contents of those tables in an android app.
Right now, works with sqlite, but it should be generic enough to work with other db types.

## Changelog

Add initial version of android databases plugin

Creating a PR, I may need to do some cleaning up, but this is to kick off that process.
Pull Request resolved: https://github.com/facebook/flipper/pull/441

Reviewed By: danielbuechele

Differential Revision: D15288831

Pulled By: jknoxville

fbshipit-source-id: 6379ad60d640ea6b0a9473acc03dd6ea81a3a8d4

src/ui/components/Button.js

@@ -127,15 +127,17 @@ const StyledButton = styled('div')(props => ({
     marginLeft: 0,
   },
 
-  '&:active': {
-    borderColor: colors.macOSTitleBarButtonBorder,
-    borderBottomColor: colors.macOSTitleBarButtonBorderBottom,
-    background: `linear-gradient(to bottom, ${
-      colors.macOSTitleBarButtonBackgroundActiveHighlight
-    } 1px, ${colors.macOSTitleBarButtonBackgroundActive} 0%, ${
-      colors.macOSTitleBarButtonBorderBlur
-    } 100%)`,
-  },
+  '&:active': props.disabled
+    ? null
+    : {
+        borderColor: colors.macOSTitleBarButtonBorder,
+        borderBottomColor: colors.macOSTitleBarButtonBorderBottom,
+        background: `linear-gradient(to bottom, ${
+          colors.macOSTitleBarButtonBackgroundActiveHighlight
+        } 1px, ${colors.macOSTitleBarButtonBackgroundActive} 0%, ${
+          colors.macOSTitleBarButtonBorderBlur
+        } 100%)`,
+      },
 
   '&:disabled': {
     borderColor: borderColor(props),

src/ui/components/table/ManagedTable.js

@@ -116,6 +116,7 @@ export type ManagedTableProps = {|
    * Allows to create context menu items for rows.
    */
   buildContextMenuItems?: () => MenuTemplate,
+  initialSortOrder?: ?TableRowSortOrder,
   /**
    * Callback when sorting changes.
    */

src/ui/components/table/TableHead.js

@@ -171,7 +171,8 @@ class TableHeadColumn extends PureComponent<{
         <TableHeaderColumnInteractive
           grow={true}
           resizable={RIGHT_RESIZABLE}
-          onResize={this.onResize}>
+          onResize={this.onResize}
+          minWidth={20}>
           {children}
         </TableHeaderColumnInteractive>
       );

src/ui/components/table/TypeBasedValueRenderer.js

@@ -0,0 +1,68 @@
+/**
+ * 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 {default as styled} from 'react-emotion';
+import {colors} from '../colors';
+import {default as Text} from '../Text';
+
+export type Value =
+  | {
+      type: 'string',
+      value: string,
+    }
+  | {
+      type: 'boolean',
+      value: boolean,
+    }
+  | {
+      type: 'integer' | 'float' | 'double' | 'number',
+      value: number,
+    }
+  | {
+      type: 'null',
+    };
+
+const NonWrappingText = styled(Text)({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  userSelect: 'none',
+});
+
+const BooleanValue = styled(NonWrappingText)(props => ({
+  '&::before': {
+    content: '""',
+    display: 'inline-block',
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: props.active ? colors.green : colors.red,
+    marginRight: 5,
+    marginTop: 1,
+  },
+}));
+
+export function renderValue(val: Value) {
+  switch (val.type) {
+    case 'boolean':
+      return (
+        <BooleanValue code={true} active={val.value}>
+          {val.value.toString()}
+        </BooleanValue>
+      );
+    case 'string':
+      return <NonWrappingText>{val.value}</NonWrappingText>;
+    case 'integer':
+    case 'float':
+    case 'double':
+    case 'number':
+      return <NonWrappingText>{val.value}</NonWrappingText>;
+    case 'null':
+      return <NonWrappingText>NULL</NonWrappingText>;
+    default:
+      return <NonWrappingText>{val.value}</NonWrappingText>;
+  }
+}

src/ui/index.js

@@ -25,7 +25,7 @@ export {default as LoadingIndicator} from './components/LoadingIndicator.js';
 //
 export {default as Popover} from './components/Popover.js';
 
-//
+// tables
 export type {
   TableColumns,
   TableRows,
@@ -39,6 +39,8 @@ export type {
 } from './components/table/types.js';
 export {default as ManagedTable} from './components/table/ManagedTable.js';
 export type {ManagedTableProps} from './components/table/ManagedTable.js';
+export type {Value} from './components/table/TypeBasedValueRenderer.js';
+export {renderValue} from './components/table/TypeBasedValueRenderer.js';
 
 //
 export type {