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/sandy-chrome/DetailSidebarImpl.tsx

@@ -0,0 +1,85 @@
+/**
+ * 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 React, {useEffect, useState} from 'react';
+import ReactDOM from 'react-dom';
+import {toggleRightSidebarAvailable} from '../reducers/application';
+import {useDispatch, useStore} from '../utils/useStore';
+import {ContentContainer} from '../sandy-chrome/ContentContainer';
+import {Layout, _Sidebar} from 'flipper-plugin';
+
+export type DetailSidebarProps = {
+  children: any;
+  width?: number;
+  minWidth?: number;
+};
+
+/* eslint-disable react-hooks/rules-of-hooks */
+export function DetailSidebarImpl({
+  children,
+  width,
+  minWidth,
+}: DetailSidebarProps) {
+  const [domNode, setDomNode] = useState(
+    document.getElementById('detailsSidebar'),
+  );
+
+  if (typeof jest !== 'undefined') {
+    // For unit tests, make sure to render elements inline
+    return <div>{children}</div>;
+  }
+
+  const dispatch = useDispatch();
+  const {rightSidebarAvailable, rightSidebarVisible} = useStore((state) => {
+    const {rightSidebarAvailable, rightSidebarVisible} = state.application;
+    return {rightSidebarAvailable, rightSidebarVisible};
+  });
+
+  useEffect(
+    function updateSidebarAvailablility() {
+      const available = Boolean(children);
+      if (available !== rightSidebarAvailable) {
+        dispatch(toggleRightSidebarAvailable(available));
+      }
+    },
+    [children, rightSidebarAvailable, dispatch],
+  );
+
+  // If the plugin container is mounting and rendering a sidbar immediately, the domNode might not yet be available
+  useEffect(() => {
+    if (!domNode) {
+      const newDomNode = document.getElementById('detailsSidebar');
+      if (!newDomNode) {
+        // if after layouting domNode is still not available, something is wrong...
+        console.error('Failed to obtain detailsSidebar node');
+      } else {
+        setDomNode(newDomNode);
+      }
+    }
+  }, [domNode]);
+
+  return (
+    (children &&
+      rightSidebarVisible &&
+      domNode &&
+      ReactDOM.createPortal(
+        <_Sidebar
+          minWidth={minWidth}
+          width={width || 300}
+          position="right"
+          gutter>
+          <ContentContainer>
+            <Layout.ScrollContainer vertical>{children}</Layout.ScrollContainer>
+          </ContentContainer>
+        </_Sidebar>,
+        domNode,
+      )) ||
+    null
+  );
+}