Display the Rocketlet's icon file in the list of rocketlets

packages/rocketchat-rocketlets/client/admin/rocketletInstall.html

@@ -0,0 +1,3 @@
+<template name="rocketletInstall">
+	<h1>Install!</h1>
+</template>

packages/rocketchat-rocketlets/client/admin/rocketletInstall.js

@@ -0,0 +1,4 @@
+Template.rocketletInstall.onCreated(function() {
+	const instance = this;
+	instance.status = new ReactiveVar(false);
+});

packages/rocketchat-rocketlets/client/admin/rocketlets.html

@@ -20,7 +20,7 @@
 										<div class="discovery__item__footer__title">Add New</div>
 										<div class="rc-discovery__item__footer__description">Install or import a new Rocketlet.</div>
 									</div>
-									<button class="rc-button rc-button--square rc-tooltip" aria-label="Install">
+									<button class="rc-button rc-button--square rc-tooltip install" aria-label="Install">
 										{{> icon icon="plus"}}
 									</button>
 								</div>
@@ -30,7 +30,7 @@
 							<div class="rc-discovery-wrap">
 								<div class="rc-discovery__item">
 									<div class="rc-discovery__item__image-wrap">
-										<div class="rc-discovery__item__image"></div>
+										<div class="rc-discovery__item__image" style="background-image: url({{ iconFileContent }})"></div>
 									</div>
 									<div class="rc-discovery__item__footer">
 										<div class="rc-discovery__container">

packages/rocketchat-rocketlets/client/admin/rocketlets.js

@@ -30,5 +30,9 @@ Template.rocketlets.events({
 		} else {
 			// show an error ? I don't think this should ever happen
 		}
+	},
+
+	'click .install'() {
+		FlowRouter.go('/admin/rocketlets-install');
 	}
 });

packages/rocketchat-rocketlets/client/orchestrator.js

@@ -61,6 +61,13 @@ FlowRouter.route('/admin/rocketlets', {
 	}
 });
 
+FlowRouter.route('/admin/rocketlets-install', {
+	name: 'rocketlet-install',
+	action() {
+		BlazeLayout.render('main', { center: 'rocketletInstall' });
+	}
+});
+
 FlowRouter.route('/admin/rocketlets/:rocketletId', {
 	name: 'rocketlet-manage',
 	action() {

packages/rocketchat-rocketlets/package.js

@@ -67,7 +67,9 @@ Package.onUse(function(api) {
 		'client/admin/rocketlets.html',
 		'client/admin/rocketlets.js',
 		'client/admin/rocketletManage.html',
-		'client/admin/rocketletManage.js'
+		'client/admin/rocketletManage.js',
+		'client/admin/rocketletInstall.html',
+		'client/admin/rocketletInstall.js'
 	], 'client');
 
 	api.addFiles('assets/stylesheets/rocketlets.css', 'client');
@@ -81,6 +83,6 @@ Package.onUse(function(api) {
 
 Npm.depends({
 	'busboy': '0.2.13',
-	'temporary-rocketlets-server': '0.1.32',
-	'temporary-rocketlets-ts-definition': '0.6.30'
+	'temporary-rocketlets-server': '0.1.34',
+	'temporary-rocketlets-ts-definition': '0.6.31'
 });

packages/rocketchat-rocketlets/server/communication/rest.js

@@ -97,7 +97,16 @@ export class RocketletsRestApi {
 
 		this.api.addRoute(':id/icon', { authRequired: true }, {
 			get() {
-				return { success: false };
+				console.log('Getting the Rocketlet\'s Icon:', this.urlParams.id);
+				const prl = manager.getOneById(this.urlParams.id);
+
+				if (prl) {
+					const info = prl.getInfo();
+
+					return { success: true, iconFileContent: info.iconFileContent };
+				} else {
+					return RocketChat.API.v1.notFound(`No Rocketlet found by the id of: ${ this.urlParams.id }`);
+				}
 			}
 		});