[FIX] App updates were not being shown correctly (#11893)

packages/rocketchat-apps/client/admin/appManage.html

@@ -9,7 +9,12 @@
 			{{/header}}
 			<div class="content">
 				{{#requiresPermission 'manage-apps'}}
-					{{#if isReady}}
+					{{#if hasError}}
+						<div class="apps-error error-color">
+							<i class="icon-attention"></i>
+							<p>{{theError}}</p>
+						</div>
+					{{else if isReady}}
 						<div class="rc-apps-details">
 							<div class="rc-apps-container rc-apps-container__header">
 								{{#if iconFileData}}
@@ -63,13 +68,13 @@
 										<div class="rc-apps-details__col">
 										{{#if author.homepage}}
 												<h3>{{_ "Author_Site"}}</h3>
-												<a href="{{author.homepage}}">{{author.homepage}}</a>
+												<a href="{{author.homepage}}" target="_blank">{{author.homepage}}</a>
 										{{/if}}
 										</div>
 										<div class="rc-apps-details__col">
 											{{#if author.support}}
 												<h3>{{_ "Support"}}</h3>
-												<a href="{{author.support}}">{{author.support}}</a>
+												<a href="{{author.support}}" target="_blank">{{author.support}}</a>
 											{{/if}}
 										</div>
 									</div>
@@ -431,11 +436,6 @@
 								{{/if}}
 							</div>
 						</div>
-					{{else if hasError}}
-						<div class="apps-error error-color">
-							<i class="icon-attention"></i>
-							<p>Sadly, an error has occured while loading this page.</p>
-						</div>
 					{{else}}
 						{{> loading}}
 					{{/if}}

packages/rocketchat-apps/client/admin/appManage.js

@@ -1,23 +1,37 @@
 import _ from 'underscore';
 import s from 'underscore.string';
+import toastr from 'toastr';
 
 import { AppEvents } from '../communication';
 import { Utilities } from '../../lib/misc/Utilities';
 
+import semver from 'semver';
+
 const HOST = 'https://marketplace.rocket.chat'; // TODO move this to inside RocketChat.API
 
 function getApps(instance) {
 	const id = instance.id.get();
 
 	return Promise.all([
-		fetch(`${ HOST }/v1/apps/${ id }`).then((data) => data.json()),
+		fetch(`${ HOST }/v1/apps/${ id }?version=${ RocketChat.Info.marketplaceApiVersion }`).then((data) => data.json()),
 		RocketChat.API.get('apps/').then((result) => result.apps.filter((app) => app.id === id)),
-	]).then(([[remoteApp], [localApp]]) => {
+	]).then(([remoteApps, [localApp]]) => {
+		remoteApps = remoteApps.filter((app) => semver.satisfies(RocketChat.Info.marketplaceApiVersion, app.requiredApiVersion)).sort((a, b) => {
+			if (semver.gt(a.version, b.version)) {
+				return -1;
+			}
+			if (semver.lt(a.version, b.version)) {
+				return 1;
+			}
+			return 0;
+		});
+
+		const remoteApp = remoteApps[0];
 		if (localApp) {
 			localApp.installed = true;
 			if (remoteApp) {
 				localApp.categories = remoteApp.categories;
-				if (localApp.version !== remoteApp.version) {
+				if (semver.gt(remoteApp.version, localApp.version)) {
 					localApp.newVersion = remoteApp.version;
 				}
 			}
@@ -53,9 +67,9 @@ Template.appManage.onCreated(function() {
 
 	const id = this.id.get();
 
-	this.__ = (key) => {
+	this.__ = (key, options, lang_tag) => {
 		const appKey = Utilities.getI18nKeyForApp(key, id);
-		return TAPi18next.exists(`project:${ appKey }`) ? TAPi18n.__(appKey) : TAPi18n.__(key);
+		return TAPi18next.exists(`project:${ appKey }`) ? TAPi18n.__(appKey, options, lang_tag) : TAPi18n.__(key, options, lang_tag);
 	};
 
 	function _morphSettings(settings) {
@@ -100,8 +114,13 @@ Template.apps.onDestroyed(function() {
 });
 
 Template.appManage.helpers({
-	_(key) {
-		return Template.instance().__(key);
+	_(key, ...args) {
+		const options = (args.pop()).hash;
+		if (!_.isEmpty(args)) {
+			options.sprintf = args;
+		}
+
+		return Template.instance().__(key, options);
 	},
 	languages() {
 		const languages = TAPi18n.getLanguages();
@@ -217,8 +236,7 @@ async function setActivate(actiavate, e, t) {
 		info.status = result.status;
 		t.app.set(info);
 	} catch (e) {
-		// el.prop('checked', !el.prop('checked'));
-		// TODO alert
+		toastr.error((e.xhr.responseJSON && e.xhr.responseJSON.error) || e.message);
 	}
 	t.processingEnabled.set(false);
 	el.prop('disabled', false);
@@ -267,7 +285,7 @@ Template.appManage.events({
 
 		const app = t.app.get();
 
-		const url = `${ HOST }/v1/apps/${ t.id.get() }/download`;
+		const url = `${ HOST }/v1/apps/${ t.id.get() }/download/${ app.version }`;
 
 		const api = app.newVersion ? `apps/${ t.id.get() }` : 'apps/';
 
@@ -276,6 +294,11 @@ Template.appManage.events({
 				el.prop('disabled', false);
 				el.removeClass('loading');
 			});
+		}).catch((e) => {
+			el.prop('disabled', false);
+			el.removeClass('loading');
+			t.hasError.set(true);
+			t.theError.set((e.xhr.responseJSON && e.xhr.responseJSON.error) || e.message);
 		});
 
 		// play animation

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

@@ -1,3 +1,5 @@
+import toastr from 'toastr';
+
 import { AppEvents } from '../communication';
 const ENABLED_STATUS = ['auto_enabled', 'manually_enabled'];
 const HOST = 'https://marketplace.rocket.chat';
@@ -67,7 +69,7 @@ Template.apps.onCreated(function() {
 	getApps(instance);
 	getInstalledApps(instance);
 
-	fetch('https://marketplace.rocket.chat/v1/categories')
+	fetch(`${ HOST }/v1/categories`)
 		.then((response) => response.json())
 		.then((data) => {
 			instance.categories.set(data);
@@ -76,7 +78,7 @@ Template.apps.onCreated(function() {
 	instance.onAppAdded = function _appOnAppAdded() {
 		// ToDo: fix this formatting data to add an app to installedApps array without to fetch all
 
-		// fetch(`https://marketplace.rocket.chat/v1/apps/${ appId }`).then((result) => {
+		// fetch(`${ HOST }/v1/apps/${ appId }`).then((result) => {
 		// 	const installedApps = instance.installedApps.get();
 
 		// 	installedApps.push({
@@ -245,10 +247,12 @@ Template.apps.events({
 	'click .js-install'(e, template) {
 		e.stopPropagation();
 
-		const url = `${ HOST }/v1/apps/${ this.latest.id }/download`;
+		const url = `${ HOST }/v1/apps/${ this.latest.id }/download/${ this.latest.version }`;
 
 		RocketChat.API.post('apps/', { url }).then(() => {
 			getInstalledApps(template);
+		}).catch((e) => {
+			toastr.error((e.xhr.responseJSON && e.xhr.responseJSON.error) || e.message);
 		});
 
 		// play animation

packages/rocketchat-lib/client/lib/RestApiClient.js

@@ -55,7 +55,9 @@ RocketChat.API = {
 					resolve(result);
 				},
 				error: function _rlGetFailure(xhr, status, errorThrown) {
-					reject(new Error(errorThrown));
+					const error = new Error(errorThrown);
+					error.xhr = xhr;
+					reject(error);
 				},
 			});
 		});