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/chrome/plugin-manager/PluginPackageInstaller.tsx

@@ -0,0 +1,110 @@
+/**
+ * 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 {
+  Button,
+  FlexRow,
+  Tooltip,
+  Glyph,
+  colors,
+  LoadingIndicator,
+} from '../../ui';
+import styled from '@emotion/styled';
+import {default as FileSelector} from '../../ui/components/FileSelector';
+import React, {useState} from 'react';
+import {installPluginFromFile} from 'flipper-plugin-lib';
+import {Toolbar} from 'flipper-plugin';
+
+const CenteredGlyph = styled(Glyph)({
+  margin: 'auto',
+  marginLeft: 2,
+});
+
+const Spinner = styled(LoadingIndicator)({
+  margin: 'auto',
+  marginLeft: 16,
+});
+
+const ButtonContainer = styled(FlexRow)({
+  width: 76,
+});
+
+const ErrorGlyphContainer = styled(FlexRow)({
+  width: 20,
+});
+
+export default function PluginPackageInstaller({
+  onInstall,
+}: {
+  onInstall: () => Promise<void>;
+}) {
+  const [path, setPath] = useState('');
+  const [isPathValid, setIsPathValid] = useState(false);
+  const [error, setError] = useState<Error>();
+  const [inProgress, setInProgress] = useState(false);
+  const onClick = async () => {
+    setError(undefined);
+    setInProgress(true);
+    try {
+      await installPluginFromFile(path);
+      await onInstall();
+    } catch (e) {
+      setError(e);
+      console.error('PluginPackageInstaller install error:', e);
+    } finally {
+      setInProgress(false);
+    }
+  };
+  const button = inProgress ? (
+    <Spinner size={16} />
+  ) : (
+    <Button
+      compact
+      type="primary"
+      disabled={!isPathValid}
+      title={
+        isPathValid
+          ? 'Click to install the specified plugin package'
+          : 'Cannot install plugin package by the specified path'
+      }
+      onClick={onClick}>
+      Install
+    </Button>
+  );
+  return (
+    <Toolbar>
+      <FileSelector
+        placeholderText="Specify path to a Flipper package or just drag and drop it here..."
+        onPathChanged={(e) => {
+          setPath(e.path);
+          setIsPathValid(e.isValid);
+          setError(undefined);
+        }}
+      />
+      <ButtonContainer>
+        <FlexRow>
+          {button}
+          <ErrorGlyphContainer>
+            {error && (
+              <Tooltip
+                options={{position: 'toRight'}}
+                title={`Something went wrong: ${error}`}>
+                <CenteredGlyph
+                  color={colors.orange}
+                  size={16}
+                  name="caution-triangle"
+                />
+              </Tooltip>
+            )}
+          </ErrorGlyphContainer>
+        </FlexRow>
+      </ButtonContainer>
+    </Toolbar>
+  );
+}