From 0ab65f50c4e40400a39c01bed8ae949ee69e7098 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Wed, 28 Mar 2018 21:06:53 -0300
Subject: [PATCH 1/7] fix inputs for rocketchat apps

---
 .../client/admin/appManage.html               | 58 +++++++++++--
 .../rocketchat-apps/client/admin/appManage.js | 84 +++++++++++--------
 2 files changed, 99 insertions(+), 43 deletions(-)

diff --git a/packages/rocketchat-apps/client/admin/appManage.html b/packages/rocketchat-apps/client/admin/appManage.html
index e9003525e4e8..b27c8a2df044 100644
--- a/packages/rocketchat-apps/client/admin/appManage.html
+++ b/packages/rocketchat-apps/client/admin/appManage.html
@@ -91,6 +91,54 @@
 								</label>
 								<span class="rc-switch__description">{{{parseDescription i18nDescription}}}</span>
 							</div>
+							{{else if  $eq type 'int'}}
+								<div class="rc-input">
+									<label class="rc-input__label">
+										<div class="rc-input__title">{{_ i18nLabel}}</div>
+										<div class="rc-input__wrapper">
+											{{#if multiline}}
+											<textarea class="rc-input__element" name="{{id}}" rows="4" style="height: auto">{{value}}</textarea>
+											{{else}}
+											<input class="rc-input__element" type="number" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
+											{{/if}}
+										</div>
+									</label>
+									{{# if i18nDescription}}
+									<div class="rc-input__description">{{{parseDescription i18nDescription}}}</div>
+									{{/if}}
+									{{# if i18nAlert}}
+									<div class="rc-input__error">
+										<div class="rc-input__error-icon">
+											{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
+										</div>
+										<div class="rc-input__error-message">{{_ "i18nAlert"}}</div>
+									</div>
+									{{/if}}
+								</div>
+							{{else if  $eq type 'password'}}
+								<div class="rc-input">
+									<label class="rc-input__label">
+										<div class="rc-input__title">{{_ i18nLabel}}</div>
+										<div class="rc-input__wrapper">
+											{{#if multiline}}
+											<textarea class="rc-input__element" name="{{id}}" rows="4" style="height: auto">{{value}}</textarea>
+											{{else}}
+											<input class="rc-input__element" type="password" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
+											{{/if}}
+										</div>
+									</label>
+									{{# if i18nDescription}}
+									<div class="rc-input__description">{{{parseDescription i18nDescription}}}</div>
+									{{/if}}
+									{{# if i18nAlert}}
+									<div class="rc-input__error">
+										<div class="rc-input__error-icon">
+											{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
+										</div>
+										<div class="rc-input__error-message">{{_ "i18nAlert"}}</div>
+									</div>
+									{{/if}}
+								</div>
 							{{else}}
 							<div class="input-line double-col">
 								<label class="setting-label">{{_ i18nLabel}}</label>
@@ -99,14 +147,6 @@
 									<input class="input-monitor" type="text" name="{{id}}" value="{{relativeUrl value}}" placeholder="{{_ i18nPlaceholder}}" {{isReadonly}}/>
 									{{/if}}
 
-									{{#if $eq type 'password'}}
-									<input class="input-monitor" type="password" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
-									{{/if}}
-
-									{{#if $eq type 'int'}}
-									<input class="input-monitor" type="number" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
-									{{/if}}
-
 									{{#if $eq type 'select'}}
 									<div class="select-arrow">
 										<i class="icon-down-open secondary-font-color"></i>
@@ -234,7 +274,7 @@
 					<div class="rc-apps-container">
 						<div class="rc-button-group">
 							<button class="rc-button rc-button--secondary js-cancel">{{ _ "Cancel" }}</button>
-							<button class="rc-button rc-button--primary js-save" disabled='{{disabled}}'>{{ _ "Save" }}</button>
+							<button class="rc-button rc-button--primary js-save {{#if saving}} loading{{/if}}" disabled='{{disabled}}'>{{ _ "Save" }}</button>
 							<button class="rc-button rc-button--cancel js-uninstall">{{ _ "Uninstall" }}</button>
 						</div>
 					</div>
diff --git a/packages/rocketchat-apps/client/admin/appManage.js b/packages/rocketchat-apps/client/admin/appManage.js
index 9014c3cea822..3f1566898623 100644
--- a/packages/rocketchat-apps/client/admin/appManage.js
+++ b/packages/rocketchat-apps/client/admin/appManage.js
@@ -3,6 +3,7 @@ import s from 'underscore.string';
 
 import { AppEvents } from '../communication';
 
+
 Template.appManage.onCreated(function() {
 	const instance = this;
 	this.id = new ReactiveVar(FlowRouter.getParam('appId'));
@@ -12,14 +13,16 @@ Template.appManage.onCreated(function() {
 	this.processingEnabled = new ReactiveVar(false);
 	this.app = new ReactiveVar({});
 	this.settings = new ReactiveVar({});
+	this.loading = new ReactiveVar(false);
 
 	const id = this.id.get();
 
 	function _morphSettings(settings) {
 		Object.keys(settings).forEach((k) => {
 			settings[k].i18nPlaceholder = settings[k].i18nPlaceholder || ' ';
-			settings[k].value = settings[k].value || settings[k].packageValue;
+			settings[k].value = settings[k].value !== undefined ? settings[k].value : settings[k].packageValue;
 			settings[k].oldValue = settings[k].value;
+			settings[k].hasChanged = false;
 		});
 
 		instance.settings.set(settings);
@@ -73,17 +76,8 @@ Template.apps.onDestroyed(function() {
 Template.appManage.helpers({
 	disabled() {
 		const t = Template.instance();
-
-		const toSave = Object.keys(t.settings.get()).filter((k) => {
-			const setting = t.settings.get()[k];
-			if (setting.hasChanged) {
-				return true;
-			}
-		});
-
-		if (toSave.length === 0) {
-			return true;
-		}
+		const settings = t.settings.get();
+		return !Object.keys(settings).some((k) => settings[k].hasChanged);
 	},
 	isReady() {
 		if (Template.instance().ready) {
@@ -134,6 +128,9 @@ Template.appManage.helpers({
 		item.tokens.forEach((t) => item.html = item.html.replace(t.token, t.text));
 
 		return item.html;
+	},
+	saving() {
+		return Template.instance().loading.get();
 	}
 });
 
@@ -172,42 +169,60 @@ Template.appManage.events({
 		});
 	},
 
-	'click .js-uninstall': (e, t) => {
+	'click .js-uninstall': async(e, t) => {
 		t.ready.set(false);
-
-		RocketChat.API.delete(`apps/${ t.id.get() }`).then(() => {
+		try {
+			await RocketChat.API.delete(`apps/${ t.id.get() }`);
 			FlowRouter.go('/admin/apps');
-		}).catch((err) => {
+		} catch (err) {
 			console.warn('Error:', err);
+		} finally {
 			t.ready.set(true);
-		});
+		}
 	},
 
 	'click .logs': (e, t) => {
 		FlowRouter.go(`/admin/apps/${ t.id.get() }/logs`);
 	},
 
-	'click .js-save': (e, t) => {
-		const toSave = [];
-
-		Object.keys(t.settings.get()).forEach((k) => {
-			const setting = t.settings.get()[k];
-			if (setting.hasChanged) {
-				toSave.push(setting);
-			}
-		});
-
-		if (toSave.length === 0) {
-			console.log('Nothing to save..');
+	'click .js-save': async(e, t) => {
+		if (t.loading.get()) {
 			return;
 		}
+		t.loading.set(true);
+		const settings = t.settings.get();
+
+
+		try {
+			const toSave = [];
+			Object.keys(settings).forEach(k => {
+				const setting = settings[k];
+				if (setting.hasChanged) {
+					toSave.push(setting);
+				}
+				// return !!setting.hasChanged;
+			});
 
-		RocketChat.API.post(`apps/${ t.id.get() }/settings`, undefined, { settings: toSave }).then((result) => {
+			if (toSave.length === 0) {
+				throw 'Nothing to save..';
+			}
+			const result = await RocketChat.API.post(`apps/${ t.id.get() }/settings`, undefined, { settings: toSave });
 			console.log('Updating results:', result);
-			result.updated.forEach((setting) => {
-				t.settings.get()[setting.id].oldValue = setting.value;
+			result.updated.forEach(setting => {
+				settings[setting.id].value = settings[setting.id].oldValue = setting.value;
 			});
-		});
+			Object.keys(settings).forEach(k => {
+				const setting = settings[k];
+				setting.hasChanged = false;
+			});
+			t.settings.set(settings);
+
+		} catch (e) {
+			console.log(e);
+		} finally {
+			t.loading.set(false);
+		}
+
 	},
 
 	'change input[type="checkbox"]': (e, t) => {
@@ -225,7 +240,7 @@ Template.appManage.events({
 		}
 	},
 
-	'change .input-monitor, keyup .input-monitor': _.throttle(function(e, t) {
+	'input input': _.throttle(function(e, t) {
 		let value = s.trim($(e.target).val());
 		switch (this.type) {
 			case 'int':
@@ -240,6 +255,7 @@ Template.appManage.events({
 
 		if (setting.oldValue !== setting.value) {
 			t.settings.get()[this.id].hasChanged = true;
+			t.settings.set(t.settings.get());
 		}
 	}, 500)
 });

From 3c5a7caa36cafc855efee25c154ef859b6176326 Mon Sep 17 00:00:00 2001
From: graywolf336 <graywolf336@craftyn.com>
Date: Thu, 29 Mar 2018 20:38:44 -0500
Subject: [PATCH 2/7] Fix the user connection status being undefined error for
 rocket.cat on the apps

---
 packages/rocketchat-apps/server/converters/users.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rocketchat-apps/server/converters/users.js b/packages/rocketchat-apps/server/converters/users.js
index d3904a885e57..6a3caeec3d1f 100644
--- a/packages/rocketchat-apps/server/converters/users.js
+++ b/packages/rocketchat-apps/server/converters/users.js
@@ -67,7 +67,7 @@ export class AppUsersConverter {
 				return UserStatusConnection.BUSY;
 			default:
 				console.warn(`The user ${ username } (${ userId }) does not have a valid status (offline, online, away, or busy). It is currently: "${ status }"`);
-				return status === '' ? UserStatusConnection.OFFLINE : status.toUpperCase();
+				return !status ? UserStatusConnection.OFFLINE : status.toUpperCase();
 		}
 	}
 }

From 08748346fe6eb5c615cd93c02c78639e0edab653 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Wed, 4 Apr 2018 13:43:01 -0300
Subject: [PATCH 3/7] text fields

---
 package-lock.json                             | 17 +++---
 .../client/admin/appManage.html               | 54 ++++++++++++++++---
 2 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8b30ae6eded0..973dab109aeb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1680,7 +1680,7 @@
 		"bcrypt": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-1.0.3.tgz",
-			"integrity": "sha512-pRyDdo73C8Nim3jwFJ7DWe3TZCgwDfWZ6nHS5LSdU77kWbj1frruvdndP02AOavtD4y8v6Fp2dolbHgp4SDrfg==",
+			"integrity": "sha1-sC3cbAtS6ha40883XVoy54DatUg=",
 			"requires": {
 				"nan": "2.6.2",
 				"node-pre-gyp": "0.6.36"
@@ -3599,7 +3599,6 @@
 			"version": "0.1.6",
 			"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.6.tgz",
 			"integrity": "sha512-IsORQDpaaSwcDP4ZZnHxgE85werpo34VYn1Ud3mq+eUsF593faR8oCZNXrROVkpFu2TsbrNhHin0aUrTsQ9vNw==",
-			"optional": true,
 			"requires": {
 				"prr": "1.0.1"
 			}
@@ -5421,7 +5420,7 @@
 		"glob": {
 			"version": "7.1.2",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-			"integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+			"integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=",
 			"requires": {
 				"fs.realpath": "1.0.0",
 				"inflight": "1.0.6",
@@ -8277,7 +8276,7 @@
 		"minimatch": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-			"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+			"integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=",
 			"requires": {
 				"brace-expansion": "1.1.11"
 			}
@@ -8530,8 +8529,7 @@
 		"natives": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/natives/-/natives-1.1.1.tgz",
-			"integrity": "sha512-8eRaxn8u/4wN8tGkhlc2cgwwvOLMLUMUn4IYTexMgWd+LyUDfeXVkk2ygQR0hvIHbJQXgHujia3ieUUDwNGkEA==",
-			"optional": true
+			"integrity": "sha512-8eRaxn8u/4wN8tGkhlc2cgwwvOLMLUMUn4IYTexMgWd+LyUDfeXVkk2ygQR0hvIHbJQXgHujia3ieUUDwNGkEA=="
 		},
 		"natural-compare": {
 			"version": "1.4.0",
@@ -8651,7 +8649,7 @@
 		"npmlog": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
-			"integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+			"integrity": "sha1-CKfyqL9zRgR3mp76StXMcXq7lUs=",
 			"requires": {
 				"are-we-there-yet": "1.1.4",
 				"console-control-strings": "1.1.0",
@@ -10110,8 +10108,7 @@
 		"prr": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-			"integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
-			"optional": true
+			"integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
 		},
 		"pump": {
 			"version": "2.0.1",
@@ -13083,7 +13080,7 @@
 		"wide-align": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
-			"integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
+			"integrity": "sha1-Vx4PGwYEY268DfwhsDObvjE0FxA=",
 			"requires": {
 				"string-width": "1.0.2"
 			}
diff --git a/packages/rocketchat-apps/client/admin/appManage.html b/packages/rocketchat-apps/client/admin/appManage.html
index b27c8a2df044..2896c48d5c46 100644
--- a/packages/rocketchat-apps/client/admin/appManage.html
+++ b/packages/rocketchat-apps/client/admin/appManage.html
@@ -139,14 +139,56 @@
 									</div>
 									{{/if}}
 								</div>
+							{{else if $eq type 'relativeUrl'}}
+								<div class="rc-input">
+									<label class="rc-input__label">
+										<div class="rc-input__title">{{_ i18nLabel}}</div>
+										<div class="rc-input__wrapper">
+											{{#if $eq type 'relativeUrl'}}
+												<input class="rc-input__element" type="text" name="{{id}}" value="{{relativeUrl value}}" placeholder="{{_ i18nPlaceholder}}" {{isReadonly}}/>
+											{{/if}}
+										</div>
+									</label>
+									{{# if i18nDescription}}
+									<div class="rc-input__description">{{{parseDescription i18nDescription}}}</div>
+									{{/if}}
+									{{# if i18nAlert}}
+									<div class="rc-input__error">
+										<div class="rc-input__error-icon">
+											{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
+										</div>
+										<div class="rc-input__error-message">{{_ "i18nAlert"}}</div>
+									</div>
+									{{/if}}
+								</div>
+							{{else if $eq type 'font'}}
+								<div class="rc-input">
+									<label class="rc-input__label">
+										<div class="rc-input__title">{{_ i18nLabel}}</div>
+										<div class="rc-input__wrapper">
+											{{#if multiline}}
+											<textarea class="rc-input__element" name="{{id}}" rows="4" style="height: auto">{{value}}</textarea>
+											{{else}}
+											<input class="rc-input__element" type="text" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
+											{{/if}}
+										</div>
+									</label>
+									{{# if i18nDescription}}
+									<div class="rc-input__description">{{{parseDescription i18nDescription}}}</div>
+									{{/if}}
+									{{# if i18nAlert}}
+									<div class="rc-input__error">
+										<div class="rc-input__error-icon">
+											{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
+										</div>
+										<div class="rc-input__error-message">{{_ "i18nAlert"}}</div>
+									</div>
+									{{/if}}
+								</div>
 							{{else}}
 							<div class="input-line double-col">
 								<label class="setting-label">{{_ i18nLabel}}</label>
 								<div class="setting-field">
-									{{#if $eq type 'relativeUrl'}}
-									<input class="input-monitor" type="text" name="{{id}}" value="{{relativeUrl value}}" placeholder="{{_ i18nPlaceholder}}" {{isReadonly}}/>
-									{{/if}}
-
 									{{#if $eq type 'select'}}
 									<div class="select-arrow">
 										<i class="icon-down-open secondary-font-color"></i>
@@ -196,10 +238,6 @@
 									<div class="settings-description">Variable name: {{getColorVariable id}}</div>
 									{{/if}}
 
-									{{#if $eq type 'font'}}
-									<input class="input-monitor" type="text" name="{{id}}" value="{{value}}"/>
-									{{/if}}
-
 									{{#if $eq type 'code'}}
 									{{#if isDisabled.disabled}}
 									{{> CodeMirror name=id options=(getEditorOptions true) code=(i18nDefaultValue) }}

From e94c296bb857e370bb9f46584e9a733db953b4f1 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Mon, 9 Apr 2018 18:44:42 -0300
Subject: [PATCH 4/7] merge

---
 .../client/admin/appManage.html               | 290 +++++++++++-------
 .../rocketchat-apps/client/admin/appManage.js |  70 ++++-
 .../client/imports/forms/input.css            |   4 +
 .../client/imports/forms/select.css           |   6 +
 .../rocketchat-ui-master/public/icons.svg     |   5 +
 .../client/views/app/directory.html           |   6 +-
 .../client/views/app/directory.js             |   8 +
 7 files changed, 275 insertions(+), 114 deletions(-)

diff --git a/packages/rocketchat-apps/client/admin/appManage.html b/packages/rocketchat-apps/client/admin/appManage.html
index 2896c48d5c46..0a2e61996a18 100644
--- a/packages/rocketchat-apps/client/admin/appManage.html
+++ b/packages/rocketchat-apps/client/admin/appManage.html
@@ -55,31 +55,31 @@
 						<div class="rc-apps-settings__item">
 							{{#if $eq type 'string'}}
 
-							<div class="rc-input">
-								<label class="rc-input__label">
-									<div class="rc-input__title">{{_ i18nLabel}}</div>
-									<div class="rc-input__wrapper">
-										{{#if multiline}}
-										<textarea class="rc-input__element" name="{{id}}" rows="4" style="height: auto">{{value}}</textarea>
-										{{else}}
-										<input class="rc-input__element" type="text" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
-										{{/if}}
-									</div>
-								</label>
-								{{# if i18nDescription}}
-								<div class="rc-input__description">{{{parseDescription i18nDescription}}}</div>
-								{{/if}}
-								{{# if i18nAlert}}
-								<div class="rc-input__error">
-									<div class="rc-input__error-icon">
-										{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
+								<div class="rc-input">
+									<label class="rc-input__label">
+										<div class="rc-input__title">{{_ i18nLabel}}</div>
+										<div class="rc-input__wrapper">
+											{{#if multiline}}
+											<textarea class="rc-input__element" name="{{id}}" rows="4" style="height: auto">{{value}}</textarea>
+											{{else}}
+											<input class="rc-input__element" type="text" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
+											{{/if}}
+										</div>
+									</label>
+									{{# if i18nDescription}}
+									<div class="rc-input__description">{{{parseDescription i18nDescription}}}</div>
+									{{/if}}
+									{{# if i18nAlert}}
+									<div class="rc-input__error">
+										<div class="rc-input__error-icon">
+											{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
+										</div>
+										<div class="rc-input__error-message">{{_ "i18nAlert"}}</div>
 									</div>
-									<div class="rc-input__error-message">{{_ "i18nAlert"}}</div>
+									{{/if}}
 								</div>
-								{{/if}}
-							</div>
 							{{else if $eq type 'boolean'}}
-							<div class="rc-switch rc-switch--blue">
+								<div class="rc-switch rc-switch--blue">
 								<label class="rc-switch__label" tabindex="-1" for="{{id}}">
 									<input type="checkbox" class="rc-switch__input" name="{{id}}" id="{{id}}" checked="{{$eq value true}}">
 									<span class="rc-switch__button">
@@ -91,7 +91,7 @@
 								</label>
 								<span class="rc-switch__description">{{{parseDescription i18nDescription}}}</span>
 							</div>
-							{{else if  $eq type 'int'}}
+							{{else if $eq type 'int'}}
 								<div class="rc-input">
 									<label class="rc-input__label">
 										<div class="rc-input__title">{{_ i18nLabel}}</div>
@@ -115,7 +115,7 @@
 									</div>
 									{{/if}}
 								</div>
-							{{else if  $eq type 'password'}}
+							{{else if $eq type 'password'}}
 								<div class="rc-input">
 									<label class="rc-input__label">
 										<div class="rc-input__title">{{_ i18nLabel}}</div>
@@ -185,121 +185,191 @@
 									</div>
 									{{/if}}
 								</div>
-							{{else}}
-							<div class="input-line double-col">
-								<label class="setting-label">{{_ i18nLabel}}</label>
-								<div class="setting-field">
-									{{#if $eq type 'select'}}
-									<div class="select-arrow">
-										<i class="icon-down-open secondary-font-color"></i>
-									</div>
-									<select class="input-monitor" name="{{id}}">
-										{{#each values}}
-										<option value="{{key}}" selected="{{selectedOption ../id key}}">{{_ i18nLabel}}</option>
-										{{/each}}
-									</select>
+							{{else if $eq type 'code'}}
+								<div class="rc-input">
+									<label class="rc-input__label">
+										<div class="rc-input__title">{{_ i18nLabel}}</div>
+										<div class="rc-input__wrapper">
+											{{#if isDisabled.disabled}}
+											{{> CodeMirror name=id options=(getEditorOptions true) code=(i18nDefaultValue) }}
+											{{else}}
+											<div class="code-mirror-box" data-editor-id="{{id}}">
+												<div class="title">
+													{{label}}
+												</div>
+												{{> CodeMirror name=id options=getEditorOptions code=value }}
+												<div class="buttons">
+													<button class="button primary button-fullscreen">Full Screen</button>
+													<button class="button primary button-restore">Exit Full Screen</button>
+												</div>
+											</div>
+											{{/if}}
+										</div>
+									</label>
+									{{# if i18nDescription}}
+									<div class="rc-input__description">{{{parseDescription i18nDescription}}}</div>
 									{{/if}}
-
-									{{#if $eq type 'language'}}
-									<div class="select-arrow">
-										<i class="icon-down-open secondary-font-color"></i>
+									{{# if i18nAlert}}
+									<div class="rc-input__error">
+										<div class="rc-input__error-icon">
+											{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
+										</div>
+										<div class="rc-input__error-message">{{_ "i18nAlert"}}</div>
 									</div>
-									<select class="input-monitor" name="{{id}}">
-										{{#each languages}}
-										<option value="{{key}}" selected="{{appLanguage key}}" dir="auto">{{name}}</option>
-										{{/each}}
-									</select>
 									{{/if}}
+								</div>
 
-									{{#if $eq type 'color'}}
-									<div class="horizontal">
-										{{#if $eq editor 'color'}}
-										<div class="flex-grow-1">
-											<input class="input-monitor colorpicker-input" type="text" name="{{id}}" value="{{value}}" autocomplete="off"/>
-											<span class="colorpicker-swatch border-component-color" style="background-color: {{value}}"></span>
-										</div>
-										{{/if}}
-										{{#if $eq editor 'expression'}}
-										<div class="flex-grow-1">
-											<input class="input-monitor" type="text" name="{{id}}" value="{{value}}"/>
-										</div>
-										{{/if}}
-										<div class="color-editor">
-											<div class="select-arrow">
-												<i class="icon-down-open secondary-font-color"></i>
-											</div>
-											<select name="color-editor">
-												{{#each allowedTypes}}
-												<option value="{{.}}" selected="{{$eq ../editor .}}">{{_ .}}</option>
+							{{else if $eq type 'select'}}
+
+
+								<div class="rc-input">
+									<label class="rc-input__label">
+										<div class="rc-input__title">{{_ i18nLabel}}</div>
+										<div class="rc-select">
+											<select class="rc-select__element" name="{{id}}">
+												{{#each values}}
+												<option class="rc-select__option" value="{{key}}" selected="{{selectedOption ../id key}}">{{_ i18nLabel}}</option>
 												{{/each}}
 											</select>
+											{{> icon block="rc-select__arrow" icon="arrow-down" }}
 										</div>
+									</label>
+									{{# if i18nDescription}}
+									<div class="rc-input__description">{{{parseDescription i18nDescription}}}</div>
+									{{/if}}
+									{{# if i18nAlert}}
+									<div class="rc-input__error">
+										<div class="rc-input__error-icon">
+											{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
+										</div>
+										<div class="rc-input__error-message">{{_ "i18nAlert"}}</div>
 									</div>
-									<div class="settings-description">Variable name: {{getColorVariable id}}</div>
 									{{/if}}
+								</div>
 
-									{{#if $eq type 'code'}}
-									{{#if isDisabled.disabled}}
-									{{> CodeMirror name=id options=(getEditorOptions true) code=(i18nDefaultValue) }}
-									{{else}}
-									<div class="code-mirror-box" data-editor-id="{{id}}">
-										<div class="title">
-											{{label}}
+							{{else if $eq type 'color'}}
+
+								<div class="rc-input">
+									<label class="rc-input__label">
+										<div class="rc-input__title">{{_ i18nLabel}}</div>
+										<div class="rc-input__wrapper">
+											{{#if multiline}}
+											<textarea class="rc-input__element" name="{{id}}" rows="4" style="height: auto">{{value}}</textarea>
+											{{else}}
+											<input class="rc-input__element" type="color" name="{{id}}" value="{{value}}" placeholder="{{_ i18nPlaceholder}}" />
+											{{/if}}
 										</div>
-										{{> CodeMirror name=id options=getEditorOptions code=value }}
-										{{setEditorOnBlur id}}
-										<div class="buttons">
-											<button class="button primary button-fullscreen">Full Screen</button>
-											<button class="button primary button-restore">Exit Full Screen</button>
+									</label>
+									{{# if i18nDescription}}
+									<div class="rc-input__description">{{{parseDescription i18nDescription}}}</div>
+									{{/if}}
+									{{# if i18nAlert}}
+									<div class="rc-input__error">
+										<div class="rc-input__error-icon">
+											{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
 										</div>
+										<div class="rc-input__error-message">{{_ "i18nAlert"}}</div>
 									</div>
 									{{/if}}
+								</div>
+								<!-- <div class="horizontal">
+									{{#if $eq editor 'color'}}
+									<div class="flex-grow-1">
+										<input class="input-monitor colorpicker-input" type="text" name="{{id}}" value="{{value}}" autocomplete="off"/>
+										<span class="colorpicker-swatch border-component-color" style="background-color: {{value}}"></span>
+									</div>
+									{{/if}}
+									{{#if $eq editor 'expression'}}
+									<div class="flex-grow-1">
+										<input class="input-monitor" type="" name="{{id}}" value="{{value}}"/>
+									</div>
 									{{/if}}
+									<div class="color-editor">
+										<div class="select-arrow">
+											<i class="icon-down-open secondary-font-color"></i>
+										</div>
+										<select name="color-editor">
+											{{#each allowedTypes}}
+											<option value="{{.}}" selected="{{$eq ../editor .}}">{{_ .}}</option>
+											{{/each}}
+										</select>
+									</div>
+								</div>
+								<div class="settings-description">Variable name: {{getColorVariable id}}</div> -->
+							{{ else if $eq type 'language'}}
 
-									{{#if $eq type 'action'}}
-									{{#if hasChanges section}}
-									<span style="line-height: 40px" class="secondary-font-color">{{_ "Save_to_enable_this_action"}}</span>
-									{{else}}
-									<button type="button" class="button primary action" data-setting="{{id}}" data-action="{{value}}">{{_ actionText}}</button>
+								<div class="rc-input">
+									<label class="rc-input__label">
+										<div class="rc-input__title">{{_ i18nLabel}}</div>
+										<div class="rc-select">
+											<select class="rc-select__element" name="{{id}}">
+												{{#each languages}}
+													<option class="rc-select__option" value="{{key}}" selected="{{selectedOption key}}">{{_ name}}</option>
+												{{/each}}
+											</select>
+											{{> icon block="rc-select__arrow" icon="arrow-down" }}
+										</div>
+									</label>
+									{{# if i18nDescription}}
+									<div class="rc-input__description">{{{parseDescription i18nDescription}}}</div>
 									{{/if}}
+									{{# if i18nAlert}}
+									<div class="rc-input__error">
+										<div class="rc-input__error-icon">
+											{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
+										</div>
+										<div class="rc-input__error-message">{{_ "i18nAlert"}}</div>
+									</div>
+									{{/if}}
+								</div>
+							{{else}}
+							<div class="input-line double-col">
+								<label class="setting-label">{{_ i18nLabel}}</label>
+								<div class="setting-field">
+									{{#if $eq type 'action'}}
+										{{#if hasChanges section}}
+										<span style="line-height: 40px" class="secondary-font-color">{{_ "Save_to_enable_this_action"}}</span>
+										{{else}}
+										<button type="button" class="button primary action" data-setting="{{id}}" data-action="{{value}}">{{_ actionText}}</button>
+										{{/if}}
 									{{/if}}
 
 									{{#if $eq type 'asset'}}
-									{{#if value.url}}
-									<div class="settings-file-preview">
-										<div class="preview" style="background-image:url({{value.url}}?_dc={{random}});"></div>
-										<div class="action">
-											<button type="button" class="button danger delete-asset"><i class="icon-trash secondary-font-color"></i>{{_ 'Delete'}}</button>
+										{{#if value.url}}
+										<div class="settings-file-preview">
+											<div class="preview" style="background-image:url({{value.url}}?_dc={{random}});"></div>
+											<div class="action">
+												<button type="button" class="button danger delete-asset"><i class="icon-trash secondary-font-color"></i>{{_ 'Delete'}}</button>
+											</div>
 										</div>
-									</div>
-									{{else}}
-									<div class="settings-file-preview">
-										<div class="preview no-file background-transparent-light secondary-font-color"><i class="icon-upload secondary-font-color"></i></div>
-										<div class="action">
-											<div class="button primary">{{_ 'Select_file'}}
-												<input type="file" accept="{{assetAccept fileConstraints}}" />
+										{{else}}
+										<div class="settings-file-preview">
+											<div class="preview no-file background-transparent-light secondary-font-color"><i class="icon-upload secondary-font-color"></i></div>
+											<div class="action">
+												<div class="button primary">{{_ 'Select_file'}}
+													<input type="file" accept="{{assetAccept fileConstraints}}" />
+												</div>
 											</div>
 										</div>
-									</div>
-									{{/if}}
+										{{/if}}
 									{{/if}}
 
 									{{#if $eq type 'roomPick'}}
-									<div>
-										{{> inputAutocomplete settings=autocompleteRoom id=id name=id class="search autocomplete" autocomplete="off" disabled=isDisabled.disabled}}
-										<ul class="selected-rooms">
-											{{#each selectedRooms}}
-											<li class="remove-room" data-setting={{../id}}>{{name}} <i class="icon-cancel secondary-font-color"></i></li>
-											{{/each}}
-										</ul>
-									</div>
+										<div>
+											{{> inputAutocomplete settings=autocompleteRoom id=id name=id class="search autocomplete" autocomplete="off" disabled=isDisabled.disabled}}
+											<ul class="selected-rooms">
+												{{#each selectedRooms}}
+												<li class="remove-room" data-setting={{../id}}>{{name}} <i class="icon-cancel secondary-font-color"></i></li>
+												{{/each}}
+											</ul>
+										</div>
 									{{/if}}
 
 									{{#if i18nDescription}}
-									<div class="settings-description">{{{parseDescription i18nDescription}}}</div>
-									{{/if}}
-									{{#if i18nAlert}}
-									<div class="settings-alert pending-color pending-background pending-border"><i class="icon-attention secondary-font-color"></i>{{{_ i18nAlert}}}</div>
+										<div class="settings-description">{{{parseDescription i18nDescription}}}</div>
+										{{/if}}
+										{{#if i18nAlert}}
+										<div class="settings-alert pending-color pending-background pending-border"><i class="icon-attention secondary-font-color"></i>{{{_ i18nAlert}}}</div>
 									{{/if}}
 								</div>
 							</div>
diff --git a/packages/rocketchat-apps/client/admin/appManage.js b/packages/rocketchat-apps/client/admin/appManage.js
index 3f1566898623..a3ebf949b08a 100644
--- a/packages/rocketchat-apps/client/admin/appManage.js
+++ b/packages/rocketchat-apps/client/admin/appManage.js
@@ -5,6 +5,16 @@ import { AppEvents } from '../communication';
 
 
 Template.appManage.onCreated(function() {
+
+	if (RocketChat.settings.cachedCollectionPrivate == null) {
+		RocketChat.settings.cachedCollectionPrivate = new RocketChat.CachedCollection({
+			name: 'private-settings',
+			eventType: 'onLogged'
+		});
+		RocketChat.settings.collectionPrivate = RocketChat.settings.cachedCollectionPrivate.collection;
+		RocketChat.settings.cachedCollectionPrivate.init();
+	}
+
 	const instance = this;
 	this.id = new ReactiveVar(FlowRouter.getParam('appId'));
 	this.ready = new ReactiveVar(false);
@@ -74,6 +84,51 @@ Template.apps.onDestroyed(function() {
 });
 
 Template.appManage.helpers({
+	// setEditorOnBlur(_id) {
+	// 	Meteor.defer(function() {
+	// 		if (!$(`.code-mirror-box[data-editor-id="${ _id }"] .CodeMirror`)[0]) {
+	// 			return;
+	// 		}
+	// 		const codeMirror = $(`.code-mirror-box[data-editor-id="${ _id }"] .CodeMirror`)[0].CodeMirror;
+	// 		if (codeMirror.changeAdded === true) {
+	// 			return;
+	// 		}
+	// 		const onChange = function() {
+	// 			const value = codeMirror.getValue();
+	// 			TempSettings.update({ _id }, { $set: { value, changed: RocketChat.settings.collectionPrivate.findOne(_id).value !== value }});
+	// 		};
+	// 		const onChangeDelayed = _.debounce(onChange, 500);
+	// 		codeMirror.on('change', onChangeDelayed);
+	// 		codeMirror.changeAdded = true;
+	// 	});
+	// },
+	languages() {
+		const languages = TAPi18n.getLanguages();
+
+		let result = Object.keys(languages).map(key => {
+			const language = languages[key];
+			return _.extend(language, { key });
+		});
+
+		result = _.sortBy(result, 'key');
+		result.unshift({
+			'name': 'Default',
+			'en': 'Default',
+			'key': ''
+		});
+		return result;
+	},
+	appLanguage(key) {
+		const setting = RocketChat.settings.get('Language');
+		return setting && setting.split('-').shift().toLowerCase() === key;
+	},
+	selectedOption(_id, val) {
+		const settings = Template.instance().settings.get();
+		return settings[_id].value === val;
+	},
+	getColorVariable(color) {
+		return color.replace(/theme-color-/, '@');
+	},
 	disabled() {
 		const t = Template.instance();
 		const settings = t.settings.get();
@@ -240,7 +295,20 @@ Template.appManage.events({
 		}
 	},
 
-	'input input': _.throttle(function(e, t) {
+	'change .rc-select__element' : (e, t) => {
+		const labelFor = $(e.currentTarget).attr('name');
+		const value = $(e.currentTarget).val();
+
+		const setting = t.settings.get()[labelFor];
+
+		if (setting) {
+			setting.value = value;
+			t.settings.get()[labelFor].hasChanged = setting.oldValue !== setting.value;
+			t.settings.set(t.settings.get());
+		}
+	},
+
+	'input input, input textarea, change input[type="color"]': _.throttle(function(e, t) {
 		let value = s.trim($(e.target).val());
 		switch (this.type) {
 			case 'int':
diff --git a/packages/rocketchat-theme/client/imports/forms/input.css b/packages/rocketchat-theme/client/imports/forms/input.css
index 311df58cad28..30e6a5c1dd56 100644
--- a/packages/rocketchat-theme/client/imports/forms/input.css
+++ b/packages/rocketchat-theme/client/imports/forms/input.css
@@ -67,6 +67,10 @@
 		&::placeholder {
 			color: var(--input-placeholder-color);
 		}
+
+		&[type=color] {
+			height: 45px;
+		}
 	}
 
 	&__description {
diff --git a/packages/rocketchat-theme/client/imports/forms/select.css b/packages/rocketchat-theme/client/imports/forms/select.css
index 9a8d5efcf24d..eec782b0dc59 100644
--- a/packages/rocketchat-theme/client/imports/forms/select.css
+++ b/packages/rocketchat-theme/client/imports/forms/select.css
@@ -6,6 +6,8 @@
 
 	flex: 0 0 auto;
 
+	margin: 0.5rem 0;
+
 	color: var(--input-text-color);
 
 	border-width: var(--input-border-width);
@@ -17,6 +19,10 @@
 	align-items: center;
 	justify-content: flex-end;
 
+	&__option {
+		text-align: right;
+	}
+
 	&__arrow {
 		position: absolute;
 		z-index: -1;
diff --git a/packages/rocketchat-ui-master/public/icons.svg b/packages/rocketchat-ui-master/public/icons.svg
index 432d6d6d4bee..f1b1d85eebce 100644
--- a/packages/rocketchat-ui-master/public/icons.svg
+++ b/packages/rocketchat-ui-master/public/icons.svg
@@ -100,4 +100,9 @@
     <symbol viewBox="0 0 512 512" id="icon-sort-amount-down"><path d="M204.485 392l-84 84.485c-4.686 4.686-12.284 4.686-16.971 0l-84-84.485c-4.686-4.686-4.686-12.284 0-16.97l7.07-7.071c4.686-4.686 12.284-4.686 16.971 0L95 419.887V44c0-6.627 5.373-12 12-12h10c6.627 0 12 5.373 12 12v375.887l51.444-51.928c4.686-4.686 12.284-4.686 16.971 0l7.07 7.071c4.687 4.686 4.687 12.284 0 16.97zM384 308v-8c0-6.627-5.373-12-12-12H268c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h104c6.627 0 12-5.373 12-12zm64-96v-8c0-6.627-5.373-12-12-12H268c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h168c6.627 0 12-5.373 12-12zm64-96v-8c0-6.627-5.373-12-12-12H268c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zM320 404v-8c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z"/></symbol>
     <symbol viewBox="0 0 576 512" id="icon-edit-rounded"><path d="M417.8 315.5l20-20c3.8-3.8 10.2-1.1 10.2 4.2V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h292.3c5.3 0 8 6.5 4.2 10.2l-20 20c-1.1 1.1-2.7 1.8-4.2 1.8H48c-8.8 0-16 7.2-16 16v352c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V319.7c0-1.6.6-3.1 1.8-4.2zm145.9-191.2L251.2 436.8l-99.9 11.1c-13.4 1.5-24.7-9.8-23.2-23.2l11.1-99.9L451.7 12.3c16.4-16.4 43-16.4 59.4 0l52.6 52.6c16.4 16.4 16.4 43 0 59.4zm-93.6 48.4L403.4 106 169.8 339.5l-8.3 75.1 75.1-8.3 233.5-233.6zm71-85.2l-52.6-52.6c-3.8-3.8-10.2-4-14.1 0L426 83.3l66.7 66.7 48.4-48.4c3.9-3.8 3.9-10.2 0-14.1z"/></symbol>
     <symbol id="icon-cube" viewBox="0 0 512 512"><path d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 34.2l224 84v.3l-224 97.1-224-97.1v-.3l224-84zM32 153.4l208 90.1v224.7l-208-104V153.4zm240 314.8V243.5l208-90.1v210.9L272 468.2z"/></symbol>
+    <symbol id="icon-circle-cross" viewBox="0 0 256 256"><path d="M183.191,174.141c2.5,2.498,2.5,6.552,0,9.05c-1.249,1.25-2.889,1.875-4.525,1.875c-1.638,0-3.277-0.625-4.525-1.875  l-46.142-46.142L81.856,183.19c-1.249,1.25-2.888,1.875-4.525,1.875c-1.638,0-3.277-0.625-4.525-1.875c-2.5-2.498-2.5-6.552,0-9.05  l46.143-46.143L72.806,81.856c-2.5-2.499-2.5-6.552,0-9.05c2.497-2.5,6.553-2.5,9.05,0l46.142,46.142l46.142-46.142  c2.497-2.5,6.553-2.5,9.051,0c2.5,2.499,2.5,6.552,0,9.05l-46.143,46.142L183.191,174.141z M256,128C256,57.42,198.58,0,128,0  C57.42,0,0,57.42,0,128c0,70.58,57.42,128,128,128C198.58,256,256,198.58,256,128z M243.2,128c0,63.521-51.679,115.2-115.2,115.2  c-63.522,0-115.2-51.679-115.2-115.2C12.8,64.478,64.478,12.8,128,12.8C191.521,12.8,243.2,64.478,243.2,128z" fill="#ef0e0e"/></symbol>
+    <symbol id="icon-circle-check" viewBox="0 0 32 32"><g><path d="M16,0C7.163,0,0,7.163,0,16c0,8.837,7.163,16,16,16c8.836,0,16-7.164,16-16C32,7.163,24.836,0,16,0z M16,30   C8.268,30,2,23.732,2,16C2,8.268,8.268,2,16,2s14,6.268,14,14C30,23.732,23.732,30,16,30z" fill="#2db730"/><path d="M23.3,10.393L13.012,20.589l-4.281-4.196c-0.394-0.391-1.034-0.391-1.428,0   c-0.395,0.391-0.395,1.024,0,1.414l4.999,4.899c0.41,0.361,1.023,0.401,1.428,0l10.999-10.899c0.394-0.39,0.394-1.024,0-1.414   C24.334,10.003,23.695,10.003,23.3,10.393z" fill="#2db730"/></g><g/><g/><g/><g/><g/><g/></symbol>
+    <symbol id="icon-loading" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" stroke="currentColor" stroke-width="5" r="26" stroke-dasharray="122.52211349000194 42.840704496667314" transform="rotate(150 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></symbol>
+    <symbol id="icon-sort-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M287.968 288H32.038c-28.425 0-42.767 34.488-22.627 54.627l127.962 128c12.496 12.496 32.758 12.497 45.255 0l127.968-128C330.695 322.528 316.45 288 287.968 288zM160 448L32 320h256L160 448z"/></symbol>
+    <symbol id="icon-sort-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M32.032 224h255.93c28.425 0 42.767-34.488 22.627-54.627l-127.962-128c-12.496-12.496-32.758-12.497-45.255 0l-127.968 128C-10.695 189.472 3.55 224 32.032 224zM160 64l128 128H32L160 64z"/></symbol>
 </svg>
diff --git a/packages/rocketchat-ui/client/views/app/directory.html b/packages/rocketchat-ui/client/views/app/directory.html
index 1095fa858637..233bd5c8854a 100644
--- a/packages/rocketchat-ui/client/views/app/directory.html
+++ b/packages/rocketchat-ui/client/views/app/directory.html
@@ -22,9 +22,9 @@
 				<table class="rc-table">
 					<thead class="rc-table-head">
 						<tr class="rc-table-tr">
-							<td class="rc-table-td js-sort" data-sort="name">Name {{> icon icon="sort" }}</td>
-							<td class="rc-table-td js-sort" data-sort="usernames">Users {{> icon icon="sort" }}</td>
-							<td class="rc-table-td js-sort" data-sort="createdAt">Created At {{> icon icon="sort" }}</td>
+							<td class="rc-table-td js-sort" data-sort="name">Name {{> icon icon=(sortIcon 'name')}}</td>
+							<td class="rc-table-td js-sort" data-sort="usernames">Users {{> icon icon=(sortIcon 'usernames') }}</td>
+							<td class="rc-table-td js-sort" data-sort="createdAt">Created At {{> icon icon=(sortIcon 'createdAt') }}</td>
 						</tr>
 					</thead>
 					<tbody class="rc-table-body">
diff --git a/packages/rocketchat-ui/client/views/app/directory.js b/packages/rocketchat-ui/client/views/app/directory.js
index a8e67817e01f..dc9f3da99aec 100644
--- a/packages/rocketchat-ui/client/views/app/directory.js
+++ b/packages/rocketchat-ui/client/views/app/directory.js
@@ -41,6 +41,14 @@ Template.directory.helpers({
 	},
 	searchType() {
 		return Template.instance().searchType.get();
+	},
+	sortIcon(key) {
+		const {
+			sortDirection,
+			searchSortBy
+		} = Template.instance();
+
+		return key === searchSortBy.get() && sortDirection.get() !== 'asc' ? 'sort-up' : 'sort-down';
 	}
 });
 

From d9083670418a0d7d0e31391337f219b70de8fdcf Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Mon, 9 Apr 2018 18:48:25 -0300
Subject: [PATCH 5/7] new fields

---
 packages/rocketchat-theme/client/imports/general/apps.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/rocketchat-theme/client/imports/general/apps.css b/packages/rocketchat-theme/client/imports/general/apps.css
index 6e8241884933..983d5680a994 100644
--- a/packages/rocketchat-theme/client/imports/general/apps.css
+++ b/packages/rocketchat-theme/client/imports/general/apps.css
@@ -1,6 +1,5 @@
 .rc-apps {
 	&-settings {
-		padding: 25px;
 		flex-direction: column;
 
 		&__item {
@@ -10,6 +9,7 @@
 	}
 
 	&-container {
+		padding: 25px 0;
 		max-width: 705px;
 		margin: auto;
     width: 100%;
@@ -73,6 +73,8 @@
 @media (width <= 500px) {
 	.rc-apps {
 		&-container {
+			padding: 25px;
+
 			flex-direction: column;
 			align-items: center;
 		}

From 2a4de391193fa686386a1fc7a58a21c07d1dc12f Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Tue, 10 Apr 2018 09:56:32 -0300
Subject: [PATCH 6/7] remove old code

---
 packages/rocketchat-apps/client/admin/appManage.js | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/rocketchat-apps/client/admin/appManage.js b/packages/rocketchat-apps/client/admin/appManage.js
index a3ebf949b08a..d504de17ff28 100644
--- a/packages/rocketchat-apps/client/admin/appManage.js
+++ b/packages/rocketchat-apps/client/admin/appManage.js
@@ -6,15 +6,6 @@ import { AppEvents } from '../communication';
 
 Template.appManage.onCreated(function() {
 
-	if (RocketChat.settings.cachedCollectionPrivate == null) {
-		RocketChat.settings.cachedCollectionPrivate = new RocketChat.CachedCollection({
-			name: 'private-settings',
-			eventType: 'onLogged'
-		});
-		RocketChat.settings.collectionPrivate = RocketChat.settings.cachedCollectionPrivate.collection;
-		RocketChat.settings.cachedCollectionPrivate.init();
-	}
-
 	const instance = this;
 	this.id = new ReactiveVar(FlowRouter.getParam('appId'));
 	this.ready = new ReactiveVar(false);

From 20ee71e398cc6d93f7d45ee0312200577f93316e Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Wed, 11 Apr 2018 13:52:34 -0300
Subject: [PATCH 7/7] fix reviwe

---
 .../rocketchat-apps/client/admin/appManage.js | 19 -------------------
 .../client/imports/forms/select.css           |  2 ++
 2 files changed, 2 insertions(+), 19 deletions(-)

diff --git a/packages/rocketchat-apps/client/admin/appManage.js b/packages/rocketchat-apps/client/admin/appManage.js
index d504de17ff28..41b35e991231 100644
--- a/packages/rocketchat-apps/client/admin/appManage.js
+++ b/packages/rocketchat-apps/client/admin/appManage.js
@@ -5,7 +5,6 @@ import { AppEvents } from '../communication';
 
 
 Template.appManage.onCreated(function() {
-
 	const instance = this;
 	this.id = new ReactiveVar(FlowRouter.getParam('appId'));
 	this.ready = new ReactiveVar(false);
@@ -75,24 +74,6 @@ Template.apps.onDestroyed(function() {
 });
 
 Template.appManage.helpers({
-	// setEditorOnBlur(_id) {
-	// 	Meteor.defer(function() {
-	// 		if (!$(`.code-mirror-box[data-editor-id="${ _id }"] .CodeMirror`)[0]) {
-	// 			return;
-	// 		}
-	// 		const codeMirror = $(`.code-mirror-box[data-editor-id="${ _id }"] .CodeMirror`)[0].CodeMirror;
-	// 		if (codeMirror.changeAdded === true) {
-	// 			return;
-	// 		}
-	// 		const onChange = function() {
-	// 			const value = codeMirror.getValue();
-	// 			TempSettings.update({ _id }, { $set: { value, changed: RocketChat.settings.collectionPrivate.findOne(_id).value !== value }});
-	// 		};
-	// 		const onChangeDelayed = _.debounce(onChange, 500);
-	// 		codeMirror.on('change', onChangeDelayed);
-	// 		codeMirror.changeAdded = true;
-	// 	});
-	// },
 	languages() {
 		const languages = TAPi18n.getLanguages();
 
diff --git a/packages/rocketchat-theme/client/imports/forms/select.css b/packages/rocketchat-theme/client/imports/forms/select.css
index eec782b0dc59..6606d3362f88 100644
--- a/packages/rocketchat-theme/client/imports/forms/select.css
+++ b/packages/rocketchat-theme/client/imports/forms/select.css
@@ -43,6 +43,8 @@
 
 		appearance: none;
 
+		width: 100%;
+
 		&::-ms-expand {
 			display: none;
 		}