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/ConsoleLogs.tsx

@@ -0,0 +1,144 @@
+/**
+ * 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 {useMemo} from 'react';
+import React from 'react';
+import {Console, Hook} from 'console-feed';
+import type {Methods} from 'console-feed/lib/definitions/Methods';
+import type {Styles} from 'console-feed/lib/definitions/Styles';
+import {createState, useValue} from 'flipper-plugin';
+import {useLocalStorageState} from 'flipper-plugin';
+import {theme, Toolbar, Layout} from 'flipper-plugin';
+import {useIsDarkMode} from '../utils/useIsDarkMode';
+import {Button, Dropdown, Menu, Checkbox} from 'antd';
+import {DownOutlined} from '@ant-design/icons';
+import {DeleteOutlined} from '@ant-design/icons';
+
+const MAX_LOG_ITEMS = 1000;
+
+export const logsAtom = createState<any[]>([]);
+export const errorCounterAtom = createState(0);
+
+export function enableConsoleHook() {
+  Hook(
+    window.console,
+    (log) => {
+      if (log.method === 'debug') {
+        return; // See below, skip debug messages which are generated very aggressively by Flipper
+      }
+      const newLogs = logsAtom.get().slice(-MAX_LOG_ITEMS);
+      newLogs.push(log);
+      logsAtom.set(newLogs);
+      if (log.method === 'error' || log.method === 'assert') {
+        errorCounterAtom.set(errorCounterAtom.get() + 1);
+      }
+    },
+    false,
+  );
+}
+
+function clearLogs() {
+  logsAtom.set([]);
+  errorCounterAtom.set(0);
+}
+
+const allLogLevels: Methods[] = [
+  'log',
+  // 'debug', We typically don't want to allow users to enable the debug logs, as they are used very intensively by flipper itself,
+  // making Flipper / console-feed. For debug level logging, use the Chrome devtools.
+  'info',
+  'warn',
+  'error',
+  'table',
+  'clear',
+  'time',
+  'timeEnd',
+  'count',
+  'assert',
+];
+
+const defaultLogLevels: Methods[] = ['warn', 'error', 'table', 'assert'];
+
+export function ConsoleLogs() {
+  const isDarkMode = useIsDarkMode();
+  const logs = useValue(logsAtom);
+  const [logLevels, setLogLevels] = useLocalStorageState<Methods[]>(
+    'console-logs-loglevels',
+    defaultLogLevels,
+  );
+
+  const styles = useMemo(buildTheme, []);
+
+  return (
+    <Layout.Top>
+      <Toolbar wash>
+        <Button onClick={clearLogs} icon={<DeleteOutlined />}>
+          Clear Logs
+        </Button>
+        <Dropdown
+          overlay={
+            <Menu>
+              {allLogLevels.map((l) => (
+                <Menu.Item
+                  key={l}
+                  onClick={() => {
+                    setLogLevels((state) =>
+                      state.includes(l)
+                        ? state.filter((level) => level !== l)
+                        : [l, ...state],
+                    );
+                  }}>
+                  <Checkbox checked={logLevels.includes(l)}>{l}</Checkbox>
+                </Menu.Item>
+              ))}
+            </Menu>
+          }>
+          <Button>
+            Log Levels
+            <DownOutlined />
+          </Button>
+        </Dropdown>
+      </Toolbar>
+      <Layout.ScrollContainer vertical>
+        <Console
+          logs={logs}
+          filter={logLevels}
+          variant={isDarkMode ? 'dark' : 'light'}
+          styles={styles}
+        />
+      </Layout.ScrollContainer>
+    </Layout.Top>
+  );
+}
+
+function buildTheme(): Styles {
+  return {
+    // See: https://github.com/samdenty/console-feed/blob/master/src/definitions/Styles.d.ts
+    BASE_BACKGROUND_COLOR: 'transparent',
+    BASE_COLOR: theme.textColorPrimary,
+    LOG_COLOR: theme.textColorPrimary,
+    LOG_BACKGROUND: 'transparent',
+    LOG_INFO_BACKGROUND: 'transparent',
+    LOG_COMMAND_BACKGROUND: 'transparent',
+    LOG_RESULT_BACKGROUND: 'transparent',
+    LOG_WARN_BACKGROUND: theme.warningColor,
+    LOG_ERROR_BACKGROUND: theme.errorColor,
+    LOG_INFO_COLOR: theme.textColorPrimary,
+    LOG_COMMAND_COLOR: theme.textColorSecondary,
+    LOG_RESULT_COLOR: theme.textColorSecondary,
+    LOG_WARN_COLOR: 'white',
+    LOG_ERROR_COLOR: 'white',
+    LOG_INFO_BORDER: theme.dividerColor,
+    LOG_COMMAND_BORDER: theme.dividerColor,
+    LOG_RESULT_BORDER: theme.dividerColor,
+    LOG_WARN_BORDER: theme.dividerColor,
+    LOG_ERROR_BORDER: theme.dividerColor,
+    LOG_BORDER: theme.dividerColor,
+  };
+}