From 2eb331aae3e95d0789d543fc8807d64fa756f333 Mon Sep 17 00:00:00 2001
From: Ben Gotow <bengotow@gmail.com>
Date: Wed, 25 May 2016 14:13:42 -0700
Subject: [PATCH] fix(packages): Show version numbr of 3rd party plugins

---
 internal_packages/plugins/lib/package-set.jsx      | 3 ++-
 internal_packages/plugins/lib/package.jsx          | 9 ++++++---
 internal_packages/plugins/lib/tab-installed.jsx    | 1 +
 internal_packages/plugins/stylesheets/plugins.less | 6 ++++++
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/internal_packages/plugins/lib/package-set.jsx b/internal_packages/plugins/lib/package-set.jsx
index 1577d3228..f86ae792c 100644
--- a/internal_packages/plugins/lib/package-set.jsx
+++ b/internal_packages/plugins/lib/package-set.jsx
@@ -9,13 +9,14 @@ class PackageSet extends React.Component {
     title: React.PropTypes.string.isRequired,
     packages: React.PropTypes.array,
     emptyText: React.PropTypes.element,
+    showVersions: React.PropTypes.bool,
   }
 
   render() {
     if (!this.props.packages) return false;
 
     const packages = this.props.packages.map((pkg) =>
-      <Package key={pkg.name} package={pkg} />
+      <Package key={pkg.name} package={pkg} showVersions={this.props.showVersions} />
     );
     let count = <span>({this.props.packages.length})</span>
 
diff --git a/internal_packages/plugins/lib/package.jsx b/internal_packages/plugins/lib/package.jsx
index 3093473b5..432ce2d75 100644
--- a/internal_packages/plugins/lib/package.jsx
+++ b/internal_packages/plugins/lib/package.jsx
@@ -9,7 +9,8 @@ class Package extends React.Component {
   static displayName = 'Package';
 
   static propTypes = {
-    'package': React.PropTypes.object.isRequired,
+    "package": React.PropTypes.object.isRequired,
+    "showVersions": React.PropTypes.bool,
   }
 
   _onDisablePackage = () => {
@@ -68,7 +69,7 @@ class Package extends React.Component {
       actions.push(<div key="install" className="btn" onClick={this._onInstallPackage}>Install</div>);
     }
 
-    const {name, description, title} = this.props.package;
+    const {name, description, title, version} = this.props.package;
 
     if (this.props.package.newerVersionAvailable) {
       extras.push(
@@ -79,6 +80,8 @@ class Package extends React.Component {
       )
     }
 
+    const versionLabel = this.props.showVersions ? `v${version}` : null;
+
     return (
       <Flexbox className="package" direction="row">
         <div className="icon-container">
@@ -86,7 +89,7 @@ class Package extends React.Component {
         </div>
         <div className="info">
           <div style={{display: "flex", flexDirection: "row"}}>
-            <div className="title">{title || name}</div>
+            <div className="title">{title || name} <span className="version">{versionLabel}</span></div>
             {uninstallButton}
           </div>
           <div className="description">{description}</div>
diff --git a/internal_packages/plugins/lib/tab-installed.jsx b/internal_packages/plugins/lib/tab-installed.jsx
index f7f353021..1c131144b 100644
--- a/internal_packages/plugins/lib/tab-installed.jsx
+++ b/internal_packages/plugins/lib/tab-installed.jsx
@@ -90,6 +90,7 @@ class TabInstalled extends React.Component {
           </Flexbox>
           <PackageSet
             packages={this.state.packages.user}
+            showVersions
             title="Installed plugins"
             emptyText={searchEmpty || <span>{`You don't have any plugins installed in ~/.nylas/packages.`}</span>}
           />
diff --git a/internal_packages/plugins/stylesheets/plugins.less b/internal_packages/plugins/stylesheets/plugins.less
index f0a86ce8d..dc653867b 100644
--- a/internal_packages/plugins/stylesheets/plugins.less
+++ b/internal_packages/plugins/stylesheets/plugins.less
@@ -94,6 +94,12 @@
         overflow: hidden;
         text-overflow: ellipsis;
       }
+      .version {
+        font-size: @font-size-small;
+        font-weight: @font-weight-normal;
+        margin-left: 10px;
+        margin-top: 4px;
+      }
       .uninstall-plugin {
         color: @text-color-link;
         margin-left: 10px;