Feature: Improve UX around Marketplace Plugins

- Add floating button bar with Uninstall, Clone, Test, and History buttons.
- Show "Installed" badge in floating button bar.
- Change action links on Plugin list page for marketplace plugins to differientate them.
- Show actual custom icon for Plugin in marketplace header if installed.
- Hide UID/GID fields when editing a marketplace plugin (blocked at the server-level).

Author: jhuckaby

htdocs/css/style.css

@@ -2049,6 +2049,18 @@ body.dark .box_buttons.floater {
 	box-shadow: 0px -2px 8px var(--background-color);
 }
 
+.box_buttons_badge_left {
+	float: left;
+	text-align: left;
+	line-height: 30px;
+	color: var(--label-color);
+	font-weight: bold;
+}
+.box_buttons_badge_left i.mdi:before {
+	transform: scale(1.25);
+	padding-right: 5px;
+}
+
 /* Plugin Params */
 
 .plugin_param_editor_cont {

htdocs/js/pages/admin/Marketplace.class.js

@@ -423,7 +423,7 @@ Page.Marketplace = class Marketplace extends Page.PageUtils {
 		app.setWindowTitle( product.title );
 		app.setHeaderNav([
 			{ icon: 'cart-variant', loc: '#Marketplace?sub=search', title: 'Marketplace' },
-			{ icon: type_def.icon, title: product.title }
+			{ icon: (installed && installed.icon) ? installed.icon : type_def.icon, title: product.title }
 		]);
 
 		var install_btn_text = installed ? `Upgrade...` : `Install ${ucfirst(product.type)}...`;
@@ -545,6 +545,18 @@ Page.Marketplace = class Marketplace extends Page.PageUtils {
 
 		html += '</div>'; // markdown-body
 		html += '</div>'; // box_content
+		
+		if (installed) {
+			// buttons at bottom
+			html += '<div class="box_buttons">';
+				html += `<div class="box_buttons_badge_left mobile_hide" style="color:var(--green)"><i class="mdi mdi-check-circle-outline"></i>Installed</div>`;
+				html += '<div class="button danger mobile_collapse" onClick="$P().do_delete_plugin()"><i class="mdi mdi-trash-can-outline">&nbsp;</i><span>Uninstall...</span></div>';
+				html += '<div class="button secondary mobile_collapse" onClick="$P().do_clone_plugin()"><i class="mdi mdi-content-copy">&nbsp;</i><span>Clone...</span></div>';
+				html += '<div class="button secondary mobile_collapse" onClick="$P().do_test_plugin()"><i class="mdi mdi-test-tube">&nbsp;</i><span>Test...</span></div>';
+				html += '<div class="button secondary mobile_collapse" onClick="$P().go_plugin_history()"><i class="mdi mdi-history">&nbsp;</i><span>History...</span></div>';
+			html += '</div>'; // box_buttons
+		}
+		
 		html += '</div>'; // box
 
 		this.div.html(html);
@@ -553,6 +565,25 @@ Page.Marketplace = class Marketplace extends Page.PageUtils {
 		this.expandInlineImages();
 		this.highlightCodeBlocks();
 		this.fixMarketDocumentLinks();
+		if (installed) this.setupBoxButtonFloater();
+	}
+	
+	do_delete_plugin() {
+		// jump over to plugins page and popup the delete dialog
+		var installed = this.installed;
+		Nav.go( 'Plugins?sub=edit&id=' + installed.id + '&delete=1' );
+	}
+	
+	do_test_plugin() {
+		// jump over to plugins page and popup the test dialog
+		var installed = this.installed;
+		Nav.go( 'Plugins?sub=edit&id=' + installed.id + '&test=1' );
+	}
+	
+	go_plugin_history() {
+		// nav to installed plugin history
+		var installed = this.installed;
+		Nav.go( '#Plugins?sub=history&id=' + installed.id );
 	}
 
 	go_vault() {
@@ -679,7 +710,7 @@ Page.Marketplace = class Marketplace extends Page.PageUtils {
 		else return '<span style="color:var(--gray)"><i class="mdi mdi-cancel">&nbsp;</i>Not Installed</span>';
 	}
 
-	do_clone() {
+	do_clone_plugin() {
 		// clone thing for editing
 		var product = this.product;
 		var installed = this.installed;
@@ -927,6 +958,7 @@ Page.Marketplace = class Marketplace extends Page.PageUtils {
 
 	onDeactivate() {
 		// called when page is deactivated
+		this.cleanupBoxButtonFloater();
 		this.div.html('');
 
 		delete this.lastSearchResp;

htdocs/js/pages/admin/Plugins.class.js

@@ -81,7 +81,9 @@ Page.Plugins = class Plugins extends Page.PageUtils {
 			var actions = [];
 			if (item.marketplace && app.hasPrivilege('edit_plugins')) actions.push( `<button class="link" data-plugin="${item.id}" onClick="$P().view_mkt_plugin_from_list(this)"><b>View</b></button>` );
 			else if (app.hasPrivilege('edit_plugins')) actions.push( `<button class="link" data-plugin="${item.id}" onClick="$P().edit_plugin_from_list(this)"><b>Edit</b></button>` );
-			if (app.hasPrivilege('delete_plugins')) actions.push( `<button class="link danger" data-plugin="${item.id}" onClick="$P().delete_plugin_from_list(this)"><b>Delete</b></button>` );
+			
+			if (item.marketplace && app.hasPrivilege('edit_plugins')) actions.push( `<button class="link danger" data-plugin="${item.id}" onClick="$P().delete_plugin_from_list(this)"><b>Uninstall</b></button>` );
+			else if (app.hasPrivilege('delete_plugins')) actions.push( `<button class="link danger" data-plugin="${item.id}" onClick="$P().delete_plugin_from_list(this)"><b>Delete</b></button>` );
 
 			var tds = [
 				'<b>' + self.getNicePlugin(item, app.hasPrivilege('edit_plugins')) + '</b>',
@@ -398,6 +400,13 @@ Page.Plugins = class Plugins extends Page.PageUtils {
 		this.renderParamEditor();
 		this.setupBoxButtonFloater();
 		this.setupEditTriggers();
+		
+		if (this.plugin.marketplace) {
+			this.div.find('#d_ep_uid, #d_ep_gid').hide();
+		}
+		
+		if (this.args.delete) this.show_delete_plugin_dialog();
+		else if (this.args.test) this.do_test();
 	}
 
 	do_test() {
@@ -1197,6 +1206,7 @@ Page.Plugins = class Plugins extends Page.PageUtils {
 
 		// UID
 		html += this.getFormRow({
+			id: 'd_ep_uid',
 			label: 'Run as User:',
 			content: this.getFormText({
 				id: 'fe_ep_uid',
@@ -1209,6 +1219,7 @@ Page.Plugins = class Plugins extends Page.PageUtils {
 
 		// GID
 		html += this.getFormRow({
+			id: 'd_ep_gid',
 			label: 'Run as Group:',
 			content: this.getFormText({
 				id: 'fe_ep_gid',