From efe70582eb0da179a2f002a5de7566b2797f536b Mon Sep 17 00:00:00 2001
From: Gabriel Delavald <gdelavald@gmail.com>
Date: Fri, 25 May 2018 20:21:29 -0300
Subject: [PATCH 1/5] Adds search, order by status and enable label

---
 .../assets/stylesheets/apps.css               |  8 +++++++
 .../client/admin/appManage.html               |  3 +++
 .../rocketchat-apps/client/admin/apps.html    | 14 ++++++++++--
 packages/rocketchat-apps/client/admin/apps.js | 22 +++++++++++++++++--
 4 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/packages/rocketchat-apps/assets/stylesheets/apps.css b/packages/rocketchat-apps/assets/stylesheets/apps.css
index b8800c68d5f6..87757e032ab6 100644
--- a/packages/rocketchat-apps/assets/stylesheets/apps.css
+++ b/packages/rocketchat-apps/assets/stylesheets/apps.css
@@ -18,3 +18,11 @@ div.apps-error {
 	width: 100%;
 	font-size: 45px;
 }
+
+.preferences-page--apps .rc-table-tr {
+	opacity: 0.5;
+}
+
+.preferences-page--apps .rc-table-tr.active {
+	opacity: 1;
+}
diff --git a/packages/rocketchat-apps/client/admin/appManage.html b/packages/rocketchat-apps/client/admin/appManage.html
index fece6da084cb..9655a7706bf1 100644
--- a/packages/rocketchat-apps/client/admin/appManage.html
+++ b/packages/rocketchat-apps/client/admin/appManage.html
@@ -6,6 +6,9 @@
 		<div class="rc-header__block rc-header__block-action">
 			<div class="rc-switch rc-switch--blue">
 				<label class="rc-switch__label">
+					<span class="rc-switch__text">
+						{{_ "Enabled"}}
+					</span>
 					<input type="checkbox" class="rc-switch__input js-input-check" id="enabled" name="enabledToggle" checked="{{isEnabled}}">
 					<span class="rc-switch__button">
 						<span class="rc-switch__button-inside"></span>
diff --git a/packages/rocketchat-apps/client/admin/apps.html b/packages/rocketchat-apps/client/admin/apps.html
index 7c78b2b59184..65de5a5f983b 100644
--- a/packages/rocketchat-apps/client/admin/apps.html
+++ b/packages/rocketchat-apps/client/admin/apps.html
@@ -2,7 +2,17 @@
 	<!-- TODO: fix this class -->
 	<section class="preferences-page preferences-page--apps">
 		{{#header sectionName="Manage_Apps" hideHelp=true fixedHeight=true}}
-			<button class="rc-button rc-button--small rc-button--primary rc-directory-plus rc-tooltip rc-tooltip--down" data-button="install" aria-label="{{_ 'Install_package'}}">{{> icon icon="plus"}}</button>
+			<div class="rc-directory-header">
+				<div class="rc-input rc-input--small rc-directory-search">
+					<label class="rc-input__label">
+						<div class="rc-input__wrapper">
+							{{> icon icon="magnifier" block="rc-input__icon" }}
+							<input type="text" class="rc-input__element rc-input__element--small js-search" name="app-filter" id="app-filter" placeholder={{_ "Search"}} autocomplete="off">
+						</div>
+					</label>
+				</div>
+				<button class="rc-button rc-button--small rc-button--primary rc-directory-plus rc-tooltip rc-tooltip--down" data-button="install" aria-label="{{_ 'Install_package'}}">{{> icon icon="plus"}}</button>
+			</div>
 		{{/header}}
 		<div class="rc-directory-content">
 			{{#requiresPermission 'manage-apps'}}
@@ -17,7 +27,7 @@
 					</thead>
 					<tbody class="rc-table-body">
 						{{#each apps}}
-							<tr class="rc-table-tr" data-name="{{name}}">
+							<tr class="rc-table-tr {{activeClass status}}" data-name="{{name}}">
 								<td class="rc-table-td rc-table-td--name">
 									<div class="rc-directory-channel-wrapper">
 										<div class="rc-directory-channel-avatar" style="background-image:url({{iconFileContent}})"></div>
diff --git a/packages/rocketchat-apps/client/admin/apps.js b/packages/rocketchat-apps/client/admin/apps.js
index ba009f1b2220..be458489df4a 100644
--- a/packages/rocketchat-apps/client/admin/apps.js
+++ b/packages/rocketchat-apps/client/admin/apps.js
@@ -1,9 +1,22 @@
 import { AppEvents } from '../communication';
 
+const sortByStatus = (a, b) => {
+	if (a.status === 'auto_enabled' || a.status === 'manually_enabled') {
+		if (b.status === 'auto_enabled' || b.status === 'manually_enabled') {
+			return a.name > b.name;
+		} else {
+			return -1;
+		}
+	} else {
+		return 1;
+	}
+};
+
 Template.apps.onCreated(function() {
 	const instance = this;
 	this.ready = new ReactiveVar(false);
 	this.apps = new ReactiveVar([]);
+	this.filter = new ReactiveVar('');
 
 	RocketChat.API.get('apps').then((result) => {
 		instance.apps.set(result.apps);
@@ -53,10 +66,13 @@ Template.apps.helpers({
 		return false;
 	},
 	apps() {
-		return Template.instance().apps.get();
+		return Template.instance().apps.get().sort(sortByStatus).filter(({name}) => name.toLowerCase().includes(Template.instance().filter.get().toLowerCase()));
 	},
 	parseStatus(status) {
 		return t(`App_status_${ status }`);
+	},
+	activeClass(status) {
+		return status === 'auto_enabled' || status === 'manually_enabled'? 'active' : '';
 	}
 });
 
@@ -70,8 +86,10 @@ Template.apps.events({
 			// show an error ? I don't think this should ever happen
 		}
 	},
-
 	'click [data-button="install"]'() {
 		FlowRouter.go('/admin/app/install');
+	},
+	'keyup #app-filter'(e, t) {
+		t.filter.set(e.currentTarget.value);
 	}
 });

From df814074dc00d8ecd7eef172017ca46480767bb6 Mon Sep 17 00:00:00 2001
From: Gabriel Delavald <gdelavald@gmail.com>
Date: Fri, 25 May 2018 20:32:32 -0300
Subject: [PATCH 2/5] Change side of label for enabling button

---
 packages/rocketchat-apps/client/admin/appManage.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/rocketchat-apps/client/admin/appManage.html b/packages/rocketchat-apps/client/admin/appManage.html
index 9655a7706bf1..a1859be07917 100644
--- a/packages/rocketchat-apps/client/admin/appManage.html
+++ b/packages/rocketchat-apps/client/admin/appManage.html
@@ -6,13 +6,13 @@
 		<div class="rc-header__block rc-header__block-action">
 			<div class="rc-switch rc-switch--blue">
 				<label class="rc-switch__label">
-					<span class="rc-switch__text">
-						{{_ "Enabled"}}
-					</span>
 					<input type="checkbox" class="rc-switch__input js-input-check" id="enabled" name="enabledToggle" checked="{{isEnabled}}">
 					<span class="rc-switch__button">
 						<span class="rc-switch__button-inside"></span>
 					</span>
+					<span class="rc-switch__text">
+						{{_ "Activate"}}
+					</span>
 				</label>
 			</div>
 

From 560f0c9ebc28f9aa76b0d15acceea69b49a5468d Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Fri, 25 May 2018 21:55:35 -0300
Subject: [PATCH 3/5] Update apps.js

---
 packages/rocketchat-apps/client/admin/apps.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/rocketchat-apps/client/admin/apps.js b/packages/rocketchat-apps/client/admin/apps.js
index be458489df4a..d19fedae28eb 100644
--- a/packages/rocketchat-apps/client/admin/apps.js
+++ b/packages/rocketchat-apps/client/admin/apps.js
@@ -1,15 +1,14 @@
 import { AppEvents } from '../communication';
-
+const ENABLED_STATUS = ['auto_enabled','manually_enabled'];
+const enabled = ({status}) => ENABLED_STATUS.includes(status);
 const sortByStatus = (a, b) => {
-	if (a.status === 'auto_enabled' || a.status === 'manually_enabled') {
-		if (b.status === 'auto_enabled' || b.status === 'manually_enabled') {
+	if (enabled(a)) {
+		if (enabled(b)) {
 			return a.name > b.name;
-		} else {
-			return -1;
 		}
-	} else {
-		return 1;
+		return -1;
 	}
+	return 1;
 };
 
 Template.apps.onCreated(function() {

From 71b8d5a76b5292d5add05851c2d193af0ea5f3d6 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Fri, 25 May 2018 22:01:04 -0300
Subject: [PATCH 4/5] Update apps.js

---
 packages/rocketchat-apps/client/admin/apps.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rocketchat-apps/client/admin/apps.js b/packages/rocketchat-apps/client/admin/apps.js
index d19fedae28eb..bf7e2a66cac9 100644
--- a/packages/rocketchat-apps/client/admin/apps.js
+++ b/packages/rocketchat-apps/client/admin/apps.js
@@ -1,5 +1,5 @@
 import { AppEvents } from '../communication';
-const ENABLED_STATUS = ['auto_enabled','manually_enabled'];
+const ENABLED_STATUS = ['auto_enabled', 'manually_enabled'];
 const enabled = ({status}) => ENABLED_STATUS.includes(status);
 const sortByStatus = (a, b) => {
 	if (enabled(a)) {

From f0d9288f5d30c3fa9f69fba7e0ac859b8621d71f Mon Sep 17 00:00:00 2001
From: Rodrigo Nascimento <rodrigoknascimento@gmail.com>
Date: Sat, 26 May 2018 10:26:16 -0300
Subject: [PATCH 5/5] Improve code and fix review

---
 packages/rocketchat-apps/client/admin/apps.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/rocketchat-apps/client/admin/apps.js b/packages/rocketchat-apps/client/admin/apps.js
index bf7e2a66cac9..181c4d061f5b 100644
--- a/packages/rocketchat-apps/client/admin/apps.js
+++ b/packages/rocketchat-apps/client/admin/apps.js
@@ -65,13 +65,15 @@ Template.apps.helpers({
 		return false;
 	},
 	apps() {
-		return Template.instance().apps.get().sort(sortByStatus).filter(({name}) => name.toLowerCase().includes(Template.instance().filter.get().toLowerCase()));
+		const instance = Template.instance();
+		const filter = instance.filter.get().toLowerCase();
+		return instance.apps.get().filter(({name}) => name.toLowerCase().includes(filter)).sort(sortByStatus);
 	},
 	parseStatus(status) {
 		return t(`App_status_${ status }`);
 	},
 	activeClass(status) {
-		return status === 'auto_enabled' || status === 'manually_enabled'? 'active' : '';
+		return enabled({status}) ? 'active' : '';
 	}
 });