From ccbd3618736410d7556e78716d29ee1aec9f792b Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 24 Jul 2019 23:21:48 -0300
Subject: [PATCH] Update appManage template (temp)

---
 app/apps/client/admin/appManage.html |  14 ++-
 app/apps/client/admin/appManage.js   | 177 +++++++++++----------------
 app/apps/client/orchestrator.js      |  50 +++++---
 3 files changed, 111 insertions(+), 130 deletions(-)

diff --git a/app/apps/client/admin/appManage.html b/app/apps/client/admin/appManage.html
index 892801b13040..9e6c92ab54cf 100644
--- a/app/apps/client/admin/appManage.html
+++ b/app/apps/client/admin/appManage.html
@@ -1,19 +1,21 @@
-<!-- This page allows for settings to be changed but not all of them are implemented yet -->
 <template name="appManage">
 	{{#with app}}
-		<section class="page-container page-home page-static page-settings rc-apps-marketplace">
+		<section class="page-container page-home page-static page-settings rc-apps-section">
 			{{# header sectionName='App_Details' fixedHeight=true hideHelp=true fullpage=true}}
 				<div class="rc-header__section-button">
-					{{#unless disabled}}
-						<button class="rc-button rc-button--cancel js-cancel-editing">{{_ "Cancel" }}</button>
+					{{#unless isSettingsPristine}}
+						<button class="rc-button rc-button--cancel js-cancel-editing-settings">{{_ "Cancel" }}</button>
 					{{/unless}}
-					<button class="rc-button rc-button--primary js-save {{#if saving}} loading{{/if}}" disabled='{{disabled}}'>{{_ "Save_changes" }}</button>
+					<button class="rc-button rc-button--primary js-save-settings {{#if saving}} loading{{/if}}" disabled='{{isSettingsPristine}}'>{{_ "Save_changes" }}</button>
 				</div>
 
 				<div class="rc-header__block rc-header__block-action">
-					<button class="rc-button rc-button--nude js-cancel">{{> icon icon="cross"}}</button>
+					<button class="rc-button rc-button--nude js-close">
+						{{> icon icon="cross"}}
+					</button>
 				</div>
 			{{/header}}
+
 			<div class="content">
 				{{#requiresPermission 'manage-apps'}}
 					{{#if error}}
diff --git a/app/apps/client/admin/appManage.js b/app/apps/client/admin/appManage.js
index 6889387635b7..116ef7174b57 100644
--- a/app/apps/client/admin/appManage.js
+++ b/app/apps/client/admin/appManage.js
@@ -1,4 +1,5 @@
 import { Meteor } from 'meteor/meteor';
+import { ReactiveDict } from 'meteor/reactive-dict';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Template } from 'meteor/templating';
@@ -16,6 +17,12 @@ import { AppEvents } from '../communication';
 import { Utilities } from '../../lib/misc/Utilities';
 import { Apps } from '../orchestrator';
 import { SideNav, popover } from '../../../ui-utils/client';
+import {
+	formatPrice,
+	formatPricingPlan,
+	handleAPIError,
+	triggerButtonLoadingState,
+} from './helpers';
 
 import './appManage.html';
 import './appManage.css';
@@ -127,48 +134,10 @@ const getApp = (instance) => {
 		});
 };
 
-const formatPrice = (price) => `\$${ Number.parseFloat(price).toFixed(2) }`;
-
-const formatPricingPlan = (pricingPlan) => {
-	const perUser = pricingPlan.isPerSeat && pricingPlan.tiers && pricingPlan.tiers.length;
-
-	const pricingPlanTranslationString = [
-		'Apps_Marketplace_pricingPlan',
-		pricingPlan.strategy,
-		perUser && 'perUser',
-	].filter(Boolean).join('_');
-
-	return t(pricingPlanTranslationString, {
-		price: formatPrice(pricingPlan.price),
-	});
-};
-
-const handleAPIError = (e) => {
-	console.error(e);
-	toastr.error((e.xhr.responseJSON && e.xhr.responseJSON.error) || e.message);
-};
-
-const triggerButtonLoadingState = (button) => {
-	const icon = button.querySelector('.rc-icon use');
-	const iconHref = icon.getAttribute('href');
-
-	button.classList.add('loading');
-	button.disabled = true;
-	icon.setAttribute('href', '#icon-loading');
-
-	return () => {
-		button.classList.remove('loading');
-		button.disabled = false;
-		icon.setAttribute('href', iconHref);
-	};
-};
-
 const promptSubscription = async (app, instance) => {
-	const { latest, purchaseType = 'buy' } = app;
-
 	let data = null;
 	try {
-		data = await APIClient.get(`apps?buildExternalUrl=true&appId=${ latest.id }&purchaseType=${ purchaseType }`);
+		data = await Apps.buildExternalUrl(app.id, app.purchaseType);
 	} catch (e) {
 		handleAPIError(e, instance);
 		return;
@@ -180,29 +149,20 @@ const promptSubscription = async (app, instance) => {
 		template: 'iframeModal',
 	}, async () => {
 		try {
-			await APIClient.post('apps/', {
-				appId: latest.id,
-				marketplace: true,
-				version: latest.version,
-			});
+			await Apps.installApp(app.id, app.version);
 			await getApp(instance);
-		} catch (e) {
-			handleAPIError(e, instance);
+		} catch (error) {
+			handleAPIError(error);
 		}
 	});
 };
 
-const viewLogs = ({ id }) => {
-	FlowRouter.go(`/admin/apps/${ id }/logs`, {}, { version: FlowRouter.getQueryParam('version') });
-};
-
 const setAppStatus = async (app, status, instance) => {
 	try {
-		const result = await APIClient.post(`apps/${ app.id }/status`, { status });
-		app.status = result.status;
+		app.status = await Apps.setAppStatus(app.id, status);
 		instance.app.set(app);
-	} catch (e) {
-		handleAPIError(e, instance);
+	} catch (error) {
+		handleAPIError(error);
 	}
 };
 
@@ -230,15 +190,15 @@ const promptAppDeactivation = (app, instance) => {
 
 const uninstallApp = async ({ id }, instance) => {
 	try {
-		await APIClient.delete(`apps/${ id }`);
+		await Apps.uninstallApp(id);
 	} catch (e) {
 		handleAPIError(e, instance);
 	}
 
 	try {
 		await getApp(instance);
-	} catch (e) {
-		handleAPIError(e, instance);
+	} catch (error) {
+		handleAPIError(error, instance);
 	}
 };
 
@@ -261,7 +221,12 @@ const promptAppUninstall = (app, instance) => {
 };
 
 Template.appManage.onCreated(function() {
-	const instance = this;
+	this.state = new ReactiveDict({
+		app: {
+			id: FlowRouter.getParam('appId'),
+		},
+	});
+
 	this.id = new ReactiveVar(FlowRouter.getParam('appId'));
 	this.ready = new ReactiveVar(false);
 	this.error = new ReactiveVar('');
@@ -272,7 +237,7 @@ Template.appManage.onCreated(function() {
 	this.loading = new ReactiveVar(false);
 
 	const id = this.id.get();
-	getApp(instance);
+	getApp(this);
 
 	this.__ = (key, options, lang_tag) => {
 		const appKey = Utilities.getI18nKeyForApp(key, id);
@@ -284,9 +249,9 @@ Template.appManage.onCreated(function() {
 			return;
 		}
 
-		const app = instance.app.get();
+		const app = this.app.get();
 		app.status = status;
-		instance.app.set(app);
+		this.app.set(app);
 	};
 
 	this.onSettingUpdated = async ({ appId }) => {
@@ -294,53 +259,64 @@ Template.appManage.onCreated(function() {
 			return;
 		}
 
-		const { settings } = await APIClient.get(`apps/${ id }/settings`);
-		Object.keys(settings).forEach((k) => {
-			settings[k].i18nPlaceholder = settings[k].i18nPlaceholder || ' ';
-			settings[k].value = settings[k].value !== undefined && settings[k].value !== null ? settings[k].value : settings[k].packageValue;
-			settings[k].oldValue = settings[k].value;
-			settings[k].hasChanged = false;
-		});
+		const settings = await Apps.getAppSettings(id);
+		for (const setting of Object.values(settings)) {
+			setting.i18nPlaceholder = setting.i18nPlaceholder || ' ';
+			setting.value = setting.value !== undefined && setting.value !== null ? setting.value : setting.packageValue;
+			setting.oldValue = setting.value;
+			setting.hasChanged = false;
+		}
 
-		instance.settings.set(settings);
+		this.settings.set(settings);
 	};
 
-	this.onAppAdded = async (appId) => {
+	this.handleAppAdded = async (appId) => {
 		if (appId !== this.id.get()) {
 			return;
 		}
 
 		try {
-			await getApp(instance);
+			await getApp(this);
 		} catch (e) {
 			handleAPIError(e, this);
 		}
 	};
 
-	this.onAppRemoved = async (appId) => {
+	this.handleAppRemoved = async (appId) => {
 		if (appId !== this.id.get()) {
 			return;
 		}
 
 		try {
-			await getApp(instance);
+			await getApp(this);
 		} catch (e) {
 			handleAPIError(e, this);
 		}
 	};
 
-	Apps.getWsListener().registerListener(AppEvents.APP_ADDED, this.onAppAdded);
-	Apps.getWsListener().registerListener(AppEvents.APP_REMOVED, this.onAppRemoved);
+	Apps.getWsListener().registerListener(AppEvents.APP_ADDED, this.handleAppAdded);
+	Apps.getWsListener().registerListener(AppEvents.APP_REMOVED, this.handleAppRemoved);
 });
 
 Template.apps.onDestroyed(function() {
 	Apps.getWsListener().unregisterListener(AppEvents.APP_STATUS_CHANGE, this.onStatusChanged);
 	Apps.getWsListener().unregisterListener(AppEvents.APP_SETTING_UPDATED, this.onSettingUpdated);
-	Apps.getWsListener().unregisterListener(AppEvents.APP_ADDED, this.onAppAdded);
-	Apps.getWsListener().unregisterListener(AppEvents.APP_REMOVED, this.onAppRemoved);
+	Apps.getWsListener().unregisterListener(AppEvents.APP_ADDED, this.handleAppAdded);
+	Apps.getWsListener().unregisterListener(AppEvents.APP_REMOVED, this.handleAppRemoved);
+});
+
+Template.appManage.onRendered(() => {
+	Tracker.afterFlush(() => {
+		SideNav.setFlex('adminFlex');
+		SideNav.openFlex();
+	});
 });
 
 Template.appManage.helpers({
+	isSettingsPristine() {
+		const settings = Template.instance().settings.get();
+		return !Object.values(settings).some(({ hasChanged }) => hasChanged);
+	},
 	isInstalled() {
 		const app = Template.instance().app.get();
 		return app.installed;
@@ -406,11 +382,6 @@ Template.appManage.helpers({
 		const settings = Template.instance().settings.get();
 		return settings[_id].value === val;
 	},
-	disabled() {
-		const t = Template.instance();
-		const settings = t.settings.get();
-		return !Object.keys(settings).some((k) => settings[k].hasChanged);
-	},
 	isReady() {
 		if (Template.instance().ready) {
 			return Template.instance().ready.get();
@@ -467,11 +438,18 @@ Template.appManage.helpers({
 });
 
 Template.appManage.events({
-	'click .js-cancel-editing': async (e, t) => {
-		t.onSettingUpdated({ appId: t.id.get() });
+	'click .js-cancel-editing-settings'(event, instance) {
+		const settings = instance.settings.get();
+
+		for (const setting of Object.values(settings)) {
+			setting.value = setting.oldValue;
+			setting.hasChanged = false;
+		}
+
+		instance.settings.set(settings);
 	},
 
-	'click .js-save': async (e, t) => {
+	'click .js-save-settings': async (e, t) => {
 		if (t.loading.get()) {
 			return;
 		}
@@ -491,14 +469,12 @@ Template.appManage.events({
 			if (toSave.length === 0) {
 				throw new Error('Nothing to save..');
 			}
-			const result = await APIClient.post(`apps/${ t.id.get() }/settings`, undefined, { settings: toSave });
-			console.log('Updating results:', result);
-			result.updated.forEach((setting) => {
-				settings[setting.id].value = setting.value;
-				settings[setting.id].oldValue = setting.value;
+			const updated = await Apps.setAppSettings(t.id.get(), toSave);
+			updated.forEach(({ id, value }) => {
+				settings[id].value = value;
+				settings[id].oldValue = value;
 			});
-			Object.keys(settings).forEach((k) => {
-				const setting = settings[k];
+			Object.values(settings).forEach((setting) => {
 				setting.hasChanged = false;
 			});
 			t.settings.set(settings);
@@ -508,11 +484,9 @@ Template.appManage.events({
 			t.loading.set(false);
 		}
 	},
-
-	'click .js-cancel'() {
-		FlowRouter.go('/admin/apps');
+	'click .js-close'() {
+		window.history.back();
 	},
-
 	'click .js-menu'(e, instance) {
 		e.stopPropagation();
 		const { currentTarget } = e;
@@ -535,7 +509,9 @@ Template.appManage.events({
 							{
 								icon: 'list-alt',
 								name: t('View_Logs'),
-								action: () => viewLogs(app, instance),
+								action: () => {
+									FlowRouter.go(`/admin/apps/${ app.id }/logs`, {}, { version: FlowRouter.getQueryParam('version') });
+								},
 							},
 						],
 					},
@@ -686,10 +662,3 @@ Template.appManage.events({
 		}
 	}, 500),
 });
-
-Template.appManage.onRendered(() => {
-	Tracker.afterFlush(() => {
-		SideNav.setFlex('adminFlex');
-		SideNav.openFlex();
-	});
-});
diff --git a/app/apps/client/orchestrator.js b/app/apps/client/orchestrator.js
index 12e8a4613d0d..25ba96b13d04 100644
--- a/app/apps/client/orchestrator.js
+++ b/app/apps/client/orchestrator.js
@@ -83,6 +83,11 @@ class AppClientOrchestrator {
 		}));
 	}
 
+	getAppsLanguages = async () => {
+		const { apps } = await APIClient.get('apps/languages');
+		return apps;
+	}
+
 	getApp = async (appId) => {
 		const { app } = await APIClient.get(`apps/${ appId }`);
 		return app;
@@ -96,45 +101,50 @@ class AppClientOrchestrator {
 		return app;
 	}
 
+	getAppSettings = async (appId) => {
+		const { settings } = await APIClient.get(`apps/${ appId }/settings`);
+		return settings;
+	}
+
+	setAppSettings = async (appId, settings) => {
+		const { updated } = await APIClient.post(`apps/${ appId }/settings`, undefined, { settings });
+		return updated;
+	}
+
 	getAppApis = async (appId) => {
 		const { apis } = await APIClient.get(`apps/${ appId }/apis`);
 		return apis;
 	}
 
-	getCategories = async () => {
-		const categories = await APIClient.get('apps?categories=true');
-		return categories;
-	}
-
 	getAppLanguages = async (appId) => {
 		const { languages } = await APIClient.get(`apps/${ appId }/languages`);
 		return languages;
 	}
 
-	getAppsLanguages = async () => {
-		const { apps } = await APIClient.get('apps/languages');
-		return apps;
-	}
-
-	setAppState = async (appId, status) => {
-		const { status: effectiveStatus } = await APIClient.post(`apps/${ appId }/status`, { status });
-		return effectiveStatus;
-	}
-
-	enableApp = (appId) => this.setAppState(appId, 'manually_enabled')
-
-	disableApp = (appId) => this.setAppState(appId, 'manually_disabled')
-
 	installApp = (appId, version) => APIClient.post('apps/', {
 		appId,
 		marketplace: true,
 		version,
 	})
 
-	uninstallApp = (appId) => APIClient.delete(`apps/${ appId }`);
+	uninstallApp = (appId) => APIClient.delete(`apps/${ appId }`)
+
+	setAppStatus = async (appId, status) => {
+		const { status: effectiveStatus } = await APIClient.post(`apps/${ appId }/status`, { status });
+		return effectiveStatus;
+	}
+
+	enableApp = (appId) => this.setAppStatus(appId, 'manually_enabled')
+
+	disableApp = (appId) => this.setAppStatus(appId, 'manually_disabled')
 
 	buildExternalUrl = (appId, purchaseType = 'buy') =>
 		APIClient.get(`apps?buildExternalUrl=true&appId=${ appId }&purchaseType=${ purchaseType }`)
+
+	getCategories = async () => {
+		const categories = await APIClient.get('apps?categories=true');
+		return categories;
+	}
 }
 
 export const Apps = new AppClientOrchestrator();