Show plugin version in Plugin Manager list

Summary: Added plugin version property + showing it in Plugin Manager

Reviewed By: passy

Differential Revision: D21839544

fbshipit-source-id: 89daed813cffb066b3b584f6df97d6674ca6be08

desktop/app/src/chrome/plugin-manager/PluginDebugger.tsx

@@ -66,6 +66,9 @@ const COLUMNS = {
   name: {
     value: 'Name',
   },
+  version: {
+    value: 'Version',
+  },
   status: {
     value: 'Status',
   },
@@ -83,6 +86,7 @@ const COLUMNS = {
 const COLUMNS_SIZES = {
   lamp: 20,
   name: 'flex',
+  version: 60,
   status: 110,
   gk: 120,
   clients: 90,
@@ -93,6 +97,7 @@ type Props = OwnProps & StateFromProps & DispatchFromProps;
 class PluginDebugger extends Component<Props> {
   buildRow(
     name: string,
+    version: string,
     loaded: boolean,
     status: string,
     GKname: string | null | undefined,
@@ -103,6 +108,7 @@ class PluginDebugger extends Component<Props> {
       columns: {
         lamp: {value: <Lamp on={loaded} />},
         name: {value: <Ellipsis>{name}</Ellipsis>},
+        version: {value: <Ellipsis>{version}</Ellipsis>},
         status: {
           value: status ? <Ellipsis title={status}>{status}</Ellipsis> : null,
         },
@@ -149,6 +155,7 @@ class PluginDebugger extends Component<Props> {
       rows.push(
         this.buildRow(
           plugin.name,
+          plugin.version,
           false,
           'GK disabled',
           plugin.gatekeeper,
@@ -161,6 +168,7 @@ class PluginDebugger extends Component<Props> {
       rows.push(
         this.buildRow(
           plugin.id,
+          plugin.version,
           true,
           '',
           plugin.gatekeeper,
@@ -173,6 +181,7 @@ class PluginDebugger extends Component<Props> {
       rows.push(
         this.buildRow(
           plugin.id,
+          plugin.version,
           true,
           '',
           plugin.gatekeeper,
@@ -185,6 +194,7 @@ class PluginDebugger extends Component<Props> {
       rows.push(
         this.buildRow(
           plugin.name,
+          plugin.version,
           false,
           'disabled',
           null,
@@ -197,6 +207,7 @@ class PluginDebugger extends Component<Props> {
       rows.push(
         this.buildRow(
           plugin.name,
+          plugin.version,
           false,
           status,
           null,

desktop/app/src/chrome/plugin-manager/PluginManager.tsx

@@ -14,7 +14,7 @@ import PluginInstaller from './PluginInstaller';
 
 const Container = styled(FlexColumn)({
   padding: 15,
-  width: 700,
+  width: 760,
 });
 
 const Row = styled(FlexColumn)({

desktop/app/src/dispatcher/__tests__/plugins.node.tsx

@@ -10,6 +10,7 @@
 jest.mock('../../defaultPlugins');
 
 import dispatcher, {
+  PluginDefinition,
   getDynamicPlugins,
   checkDisabled,
   checkGK,
@@ -24,7 +25,6 @@ import configureStore from 'redux-mock-store';
 import {TEST_PASSING_GK, TEST_FAILING_GK} from '../../fb-stubs/GK';
 import TestPlugin from './TestPlugin';
 import {resetConfigForTesting} from '../../utils/processConfig';
-import {PluginDefinition} from '../../reducers/pluginManager';
 
 const mockStore = configureStore<State, {}>([])(
   reducers(undefined, {type: 'INIT'}),
@@ -70,6 +70,7 @@ test('checkDisabled', () => {
     disabled({
       name: 'other Name',
       entry: './test/index.js',
+      version: '1.0.0',
     }),
   ).toBeTruthy();
 
@@ -77,6 +78,7 @@ test('checkDisabled', () => {
     disabled({
       name: disabledPlugin,
       entry: './test/index.js',
+      version: '1.0.0',
     }),
   ).toBeFalsy();
 });
@@ -86,6 +88,7 @@ test('checkGK for plugin without GK', () => {
     checkGK([])({
       name: 'pluginID',
       entry: './test/index.js',
+      version: '1.0.0',
     }),
   ).toBeTruthy();
 });
@@ -96,6 +99,7 @@ test('checkGK for passing plugin', () => {
       name: 'pluginID',
       gatekeeper: TEST_PASSING_GK,
       entry: './test/index.js',
+      version: '1.0.0',
     }),
   ).toBeTruthy();
 });
@@ -107,6 +111,7 @@ test('checkGK for failing plugin', () => {
     name,
     gatekeeper: TEST_FAILING_GK,
     entry: './test/index.js',
+    version: '1.0.0',
   });
 
   expect(plugins).toBeFalsy();
@@ -118,6 +123,7 @@ test('requirePlugin returns null for invalid requires', () => {
   const plugin = requireFn({
     name: 'pluginID',
     entry: 'this/path/does not/exist',
+    version: '1.0.0',
   });
 
   expect(plugin).toBeNull();
@@ -129,6 +135,7 @@ test('requirePlugin loads plugin', () => {
   const plugin = requireFn({
     name,
     entry: path.join(__dirname, 'TestPlugin'),
+    version: '1.0.0',
   });
   expect(plugin!.prototype).toBeInstanceOf(FlipperPlugin);
   expect(plugin!.id).toBe(TestPlugin.id);

desktop/app/src/dispatcher/plugins.tsx

@@ -39,6 +39,7 @@ export type PluginDefinition = {
   out?: string;
   gatekeeper?: string;
   entry?: string;
+  version: string;
 };
 
 export default (store: Store, logger: Logger) => {

desktop/app/src/plugin.tsx

@@ -96,6 +96,7 @@ export abstract class FlipperBasePlugin<
   static title: string | null = null;
   static category: string | null = null;
   static id: string = '';
+  static version: string = '';
   static icon: string | null = null;
   static gatekeeper: string | null = null;
   static entry: string | null = null;

desktop/app/src/reducers/__tests__/plugins.node.tsx

@@ -72,7 +72,7 @@ test('do not add plugin twice', () => {
 });
 
 test('add gatekeeped plugin', () => {
-  const gatekeepedPlugins = [{name: 'plugin', out: 'out.js'}];
+  const gatekeepedPlugins = [{name: 'plugin', out: 'out.js', version: '1.0.0'}];
   const res = reducer(
     {
       devicePlugins: new Map(),