Plugins: Add Action Links to Plugin Detail View (#11718)

* Adds plugin ‘action links’ buttons to the plugin detail view. Fixes #82 * Add rel attribute for external link.
Automattic · Mar 10, 2017 · e0cce68 · e0cce68
1 parent eab8482
commit e0cce68
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/client/lib/plugins/utils.js b/client/lib/plugins/utils.js
@@ -59,6 +59,7 @@ function filterNoticesBy( site, pluginSlug, log ) {
 PluginUtils = {
 	whiteListPluginData: function( plugin ) {
 		return pick( plugin,
+			'action_links',
 			'active',
 			'author',
 			'author_url',

diff --git a/client/my-sites/plugins/plugin-meta/index.jsx b/client/my-sites/plugins/plugin-meta/index.jsx
@@ -8,6 +8,7 @@ import i18n from 'i18n-calypso';
 import some from 'lodash/some';
 import get from 'lodash/get';
 import { includes } from 'lodash';
+import { isEmpty } from 'lodash';
 import Gridicon from 'gridicons';
 
 /**
@@ -330,6 +331,7 @@ const PluginMeta = React.createClass( {
 		} );
 
 		const plugin = this.props.selectedSite && this.props.sites[ 0 ] ? this.props.sites[ 0 ].plugin : this.props.plugin;
+		const actionLinks = get( plugin, 'action_links' );
 
 		return (
 			<div className="plugin-meta">
@@ -345,6 +347,18 @@ const PluginMeta = React.createClass( {
 							<div className="plugin-meta__meta">
 								{ this.renderAuthorUrl() }
 							</div>
+							{ ! isEmpty( actionLinks ) &&
+								<div className="plugin-meta__action-links">
+									{ Object.keys( actionLinks ).map( linkTitle => (
+										<Button compact icon
+											href={ actionLinks[ linkTitle ] }
+											target="_blank"
+											rel="noopener noreferrer">
+												{ linkTitle } <Gridicon icon="external" />
+										</Button>
+									) ) }
+								</div>
+							}
 						</div>
 						{ this.renderActions() }
 					</div>

diff --git a/client/my-sites/plugins/plugin-meta/style.scss b/client/my-sites/plugins/plugin-meta/style.scss
@@ -103,12 +103,13 @@
 	}
 
 	@include breakpoint( '>480px' ) {
+		min-width: 22%;
 		border: none;
 		margin: 0;
 		padding: 0;
 		text-align: right;
 		justify-content: flex-end;
-		align-self: center;
+		align-self: flex-start;
 
 		.plugin-action {
 			margin-top: 16px;
@@ -149,6 +150,19 @@
 	color: $alert-green;
 }
 
+.plugin-meta__action-links {
+	display: flex;
+	flex-wrap: wrap;
+	clear: both;
+	padding-top: 12px;
+
+	.button {
+		margin-top: 12px;
+		flex-shrink: 0;
+		margin-right: 10px;
+	}
+}
+
 a.plugin-meta__settings-link {
 	color: $gray;
 	display: block;