Migrate PluginDebugger from js to tsx

Summary: Migrated PluginDebugger.js to PluginDebugger.tsx

Reviewed By: passy

Differential Revision: D16732025

fbshipit-source-id: c4ff5586f823e90eba14eef5a8dac114a058763b

src/App.js

@@ -20,7 +20,7 @@ import ShareSheetExportFile from './chrome/ShareSheetExportFile.js';
 import PluginContainer from './PluginContainer.js';
 import Sheet from './chrome/Sheet.js';
 import {ipcRenderer, remote} from 'electron';
-import PluginDebugger from './chrome/PluginDebugger.js';
+import PluginDebugger from './chrome/PluginDebugger.tsx';
 import {
   ShareType,
   ActiveSheet,

src/chrome/PluginDebugger.tsx

@@ -5,12 +5,10 @@
  * @format
  */
 
-import type {FlipperDevicePlugin, FlipperPlugin} from '../plugin.tsx';
-import type {PluginDefinition} from '../dispatcher/plugins.tsx';
-import type Client from '../Client.tsx';
-import type {TableBodyRow} from '../ui/components/table/types';
-
-import {Component, Fragment} from 'react';
+import {PluginDefinition} from '../dispatcher/plugins';
+import Client from '../Client';
+import {TableBodyRow} from '../ui/components/table/types';
+import React, {Component, Fragment} from 'react';
 import {connect} from 'react-redux';
 import {
   FlexColumn,
@@ -22,6 +20,7 @@ import {
   Link,
 } from 'flipper';
 import StatusIndicator from '../ui/components/StatusIndicator';
+import {State as Store} from '../reducers';
 
 const Container = styled(FlexColumn)({
   padding: 10,
@@ -64,16 +63,21 @@ const Lamp = props => (
   <StatusIndicator statusColor={props.on ? colors.lime : colors.red} />
 );
 
-type Props = {|
-  devicePlugins: Array<FlipperDevicePlugin<>>,
-  clientPlugins: Array<FlipperPlugin<>>,
-  gatekeepedPlugins: Array<PluginDefinition>,
-  disabledPlugins: Array<PluginDefinition>,
-  failedPlugins: Array<[PluginDefinition, string]>,
-  clients: Array<Client>,
-  selectedDevice: ?string,
-  onHide: () => mixed,
-|};
+type StateFromProps = {
+  gatekeepedPlugins: Array<PluginDefinition>;
+  disabledPlugins: Array<PluginDefinition>;
+  failedPlugins: Array<[PluginDefinition, string]>;
+  clients: Array<Client>;
+  selectedDevice: string | null | undefined;
+  devicePlugins: Array<PluginDefinition>;
+  clientPlugins: Array<PluginDefinition>;
+};
+
+type DispatchFromProps = {};
+
+type OwnProps = {
+  onHide: () => any;
+};
 
 const COLUMNS = {
   lamp: {
@@ -105,14 +109,15 @@ const COLUMNS_SIZES = {
   source: 140,
 };
 
+type Props = OwnProps & StateFromProps & DispatchFromProps;
 class PluginDebugger extends Component<Props> {
   buildRow(
     name: string,
     loaded: boolean,
     status: string,
-    GKname: ?string,
-    GKpassing: ?boolean,
-    pluginPath: ?string,
+    GKname: string | null | undefined,
+    GKpassing: boolean | null | undefined,
+    pluginPath: string | null | undefined,
   ): TableBodyRow {
     return {
       key: name.toLowerCase(),
@@ -191,10 +196,8 @@ class PluginDebugger extends Component<Props> {
           plugin.id,
           true,
           '',
-          // $FlowFixMe: Flow doesn't know this is inherited from FlipperBasePlugin
           plugin.gatekeeper,
           true,
-          // $FlowFixMe: Flow doesn't know this is inherited from FlipperBasePlugin
           externalPluginPath(plugin),
         ),
       ),
@@ -206,10 +209,8 @@ class PluginDebugger extends Component<Props> {
           plugin.id,
           true,
           '',
-          // $FlowFixMe: Flow doesn't know this is inherited from FlipperBasePlugin
           plugin.gatekeeper,
           true,
-          // $FlowFixMe: Flow doesn't know this is inherited from FlipperBasePlugin
           externalPluginPath(plugin),
         ),
       ),
@@ -325,8 +326,7 @@ class PluginDebugger extends Component<Props> {
   }
 }
 
-// $FlowFixMe
-export default connect(
+export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
   ({
     plugins: {
       devicePlugins,
@@ -343,6 +343,6 @@ export default connect(
     clients,
     disabledPlugins,
     failedPlugins,
-    selectedDevice: selectedDevice?.serial,
+    selectedDevice: selectedDevice && selectedDevice.serial,
   }),
 )(PluginDebugger);

src/dispatcher/plugins.tsx

@@ -28,8 +28,9 @@ import {default as config} from '../utils/processConfig';
 import isProduction from '../utils/isProduction';
 
 export type PluginDefinition = {
+  id?: string;
   name: string;
-  out: string;
+  out?: string;
   gatekeeper?: string;
   entry?: string;
 };