UI

Summary: Setting up a sheet to list plugins that can be installed from NPM

Reviewed By: jknoxville

Differential Revision: D17394824

fbshipit-source-id: 26c6ffea9de9cf3fe8488ea1a757eae7b7aaa7ef

src/App.tsx

@@ -30,11 +30,13 @@ import {
   ACTIVE_SHEET_SHARE_DATA_IN_FILE,
   ACTIVE_SHEET_SELECT_PLUGINS_TO_EXPORT,
   ACTIVE_SHEET_PLUGIN_SHEET,
+  ACTIVE_SHEET_PLUGIN_INSTALLER,
 } from './reducers/application';
 import {Logger} from './fb-interfaces/Logger';
 import BugReporter from './fb-stubs/BugReporter';
 import {State as Store} from './reducers/index';
 import {StaticView} from './reducers/connections';
+import PluginInstaller from './chrome/PluginInstaller';
 const version = remote.app.getVersion();
 
 type OwnProps = {
@@ -86,6 +88,8 @@ export class App extends React.Component<Props> {
         return <SignInSheet onHide={onHide} />;
       case ACTIVE_SHEET_SELECT_PLUGINS_TO_EXPORT:
         return <ExportDataPluginSheet onHide={onHide} />;
+      case ACTIVE_SHEET_PLUGIN_INSTALLER:
+        return <PluginInstaller onHide={onHide} />;
       case ACTIVE_SHEET_SHARE_DATA_IN_FILE:
         return (
           <ShareSheetExportFile

src/chrome/PluginInstaller.tsx

@@ -0,0 +1,104 @@
+/**
+ * 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 {
+  FlexColumn,
+  styled,
+  ManagedTable_immutable,
+  Toolbar,
+  SearchInput,
+  SearchBox,
+  Button,
+  colors,
+  Spacer,
+} from 'flipper';
+import React, {useCallback, useState} from 'react';
+import {remote} from 'electron';
+import {List} from 'immutable';
+
+const Container = styled(FlexColumn)({
+  width: 600,
+  height: 400,
+  background: colors.white,
+});
+
+const columnSizes = {
+  name: '25%',
+  version: '10%',
+  description: 'flex',
+  install: '15%',
+};
+
+const columns = {
+  name: {
+    value: 'Name',
+  },
+  version: {
+    value: 'Version',
+  },
+  description: {
+    value: 'Description',
+  },
+  install: {
+    value: '',
+  },
+};
+
+const RestartBar = styled(FlexColumn)({
+  backgroundColor: colors.red,
+  color: colors.white,
+  fontWeight: 500,
+  padding: 10,
+  cursor: 'pointer',
+  textAlign: 'center',
+});
+
+export default function(props: {onHide: () => any}) {
+  const [restartRequired] = useState(false);
+  const [query, setQuery] = useState('');
+  const restartApp = useCallback(() => {
+    remote.app.relaunch();
+    remote.app.exit();
+  }, []);
+
+  const rows = List();
+
+  return (
+    <Container>
+      {restartRequired && (
+        <RestartBar onClick={restartApp}>
+          To activate this plugin, Flipper needs to restart. Click here to
+          restart!
+        </RestartBar>
+      )}
+      <Toolbar>
+        <SearchBox>
+          <SearchInput
+            onChange={e => setQuery(e.target.value)}
+            value={query}
+            placeholder="Search Flipper plugins..."
+          />
+        </SearchBox>
+      </Toolbar>
+      <ManagedTable_immutable
+        key="FuryEvents"
+        rowLineHeight={28}
+        floating={false}
+        multiline={true}
+        columnSizes={columnSizes}
+        columns={columns}
+        highlightableRows={false}
+        highlightedRows={new Set()}
+        rows={rows}
+      />
+      <Toolbar position="bottom">
+        <Spacer />
+        <Button onClick={props.onHide}>Close</Button>
+      </Toolbar>
+    </Container>
+  );
+}

src/reducers/application.tsx

@@ -23,6 +23,8 @@ export const ACTIVE_SHEET_SHARE_DATA_IN_FILE: 'SHARE_DATA_IN_FILE' =
 export const SET_EXPORT_STATUS_MESSAGE: 'SET_EXPORT_STATUS_MESSAGE' =
   'SET_EXPORT_STATUS_MESSAGE';
 export const UNSET_SHARE: 'UNSET_SHARE' = 'UNSET_SHARE';
+export const ACTIVE_SHEET_PLUGIN_INSTALLER: 'ACTIVE_SHEET_PLUGIN_INSTALLER' =
+  'ACTIVE_SHEET_PLUGIN_INSTALLER';
 
 export type ActiveSheet =
   | typeof ACTIVE_SHEET_PLUGIN_SHEET
@@ -32,6 +34,7 @@ export type ActiveSheet =
   | typeof ACTIVE_SHEET_SIGN_IN
   | typeof ACTIVE_SHEET_SHARE_DATA_IN_FILE
   | typeof ACTIVE_SHEET_SELECT_PLUGINS_TO_EXPORT
+  | typeof ACTIVE_SHEET_PLUGIN_INSTALLER
   | null;
 
 export type LauncherMsg = {