PluginManager

Summary: Adding the plugin installer to the plugin sheet as a second tab

Reviewed By: passy

Differential Revision: D17450842

fbshipit-source-id: 211c9f15ed2614a1dd46d974b86f50c825f81fb0

src/chrome/PluginManager.tsx

@@ -0,0 +1,45 @@
+/**
+ * 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 React, {useState} from 'react';
+import {FlexColumn, Button, styled, Tab, Tabs, TabsContainer} from 'flipper';
+import PluginDebugger from './PluginDebugger';
+import PluginInstaller from './PluginInstaller';
+
+const Container = styled(FlexColumn)({
+  padding: 15,
+  width: 700,
+});
+
+const Row = styled(FlexColumn)({
+  alignItems: 'flex-end',
+});
+
+type Tabs = 'Plugin Status' | 'Install Plugins';
+
+export default function(props: {onHide: () => any}) {
+  const [tab, setTab] = useState<Tabs>('Plugin Status');
+  return (
+    <Container>
+      <TabsContainer>
+        <Tabs
+          active={tab}
+          onActive={setTab as (s: string | null | undefined) => void}>
+          <Tab label="Plugin Status" />
+          <Tab label="Install Plugins" />
+        </Tabs>
+        {tab === 'Plugin Status' && <PluginDebugger />}
+        {tab === 'Install Plugins' && <PluginInstaller />}
+      </TabsContainer>
+      <Row>
+        <Button compact padded onClick={props.onHide}>
+          Close
+        </Button>
+      </Row>
+    </Container>
+  );
+}