Move app/src (mostly) to flipper-ui-core/src

Summary:
This diff moves all UI code from app/src to app/flipper-ui-core. That is now slightly too much (e.g. node deps are not removed yet), but from here it should be easier to move things out again, as I don't want this diff to be open for too long to avoid too much merge conflicts.

* But at least flipper-ui-core is Electron free :)
* Killed all cross module imports as well, as they where now even more in the way
* Some unit test needed some changes, most not too big (but emotion hashes got renumbered in the snapshots, feel free to ignore that)
* Found some files that were actually meaningless (tsconfig in plugins, WatchTools files, that start generating compile errors, removed those

Follow up work:
* make flipper-ui-core configurable, and wire up flipper-server-core in Electron instead of here
* remove node deps (aigoncharov)
* figure out correct place to load GKs, plugins, make intern requests etc., and move to the correct module
* clean up deps

Reviewed By: aigoncharov

Differential Revision: D32427722

fbshipit-source-id: 14fe92e1ceb15b9dcf7bece367c8ab92df927a70

desktop/flipper-ui-core/src/ui/components/Select.tsx

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {Component, CSSProperties} from 'react';
+import Text from './Text';
+import styled from '@emotion/styled';
+import React from 'react';
+import {theme} from 'flipper-plugin';
+
+const Label = styled.label({
+  display: 'flex',
+  alignItems: 'center',
+});
+Label.displayName = 'Select:Label';
+
+const LabelText = styled(Text)({
+  fontWeight: 500,
+  marginRight: 5,
+});
+LabelText.displayName = 'Select:LabelText';
+
+const SelectMenu = styled.select<{grow?: boolean}>((props) => ({
+  flexGrow: props.grow ? 1 : 0,
+  background: theme.backgroundDefault,
+  border: `1px solid ${theme.dividerColor}`,
+}));
+SelectMenu.displayName = 'Select:SelectMenu';
+
+/**
+ * Dropdown to select from a list of options
+ * @deprecated use Select from antd instead: https://ant.design/components/select/
+ */
+export default class Select extends Component<{
+  /** Additional className added to the element */
+  className?: string;
+  /** The list of options to display */
+  options: {
+    [key: string]: string;
+  };
+  /** DEPRECATED: Callback when the selected value changes. The callback is called with the displayed value. */
+  onChange?: (value: string) => void;
+
+  /** Callback when the selected value changes. The callback is called with the key for the displayed value */
+  onChangeWithKey?: (key: string) => void;
+
+  /** Selected key */
+  selected?: string | null | undefined;
+  /** Label shown next to the dropdown */
+  label?: string;
+  /** Select box should take all available space */
+  grow?: boolean;
+
+  /** Whether the user can interact with the select and change the selcted option */
+  disabled?: boolean;
+  style?: CSSProperties;
+}> {
+  selectID: string = Math.random().toString(36);
+
+  onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (this.props.onChangeWithKey) {
+      this.props.onChangeWithKey(event.target.value);
+    }
+    if (this.props.onChange) {
+      this.props.onChange(this.props.options[event.target.value]);
+    }
+  };
+
+  render() {
+    const {className, options, selected, label, grow, disabled, style} =
+      this.props;
+
+    let select = (
+      <SelectMenu
+        grow={grow}
+        id={this.selectID}
+        onChange={this.onChange}
+        className={className}
+        disabled={disabled}
+        value={selected || ''}
+        style={style}>
+        {Object.keys(options).map((key, index) => (
+          <option value={key} key={index}>
+            {options[key]}
+          </option>
+        ))}
+      </SelectMenu>
+    );
+
+    if (label) {
+      select = (
+        <Label htmlFor={this.selectID}>
+          <LabelText>{label}</LabelText>
+          {select}
+        </Label>
+      );
+    }
+
+    return select;
+  }
+}