[FIX] Manage apps layout (#10882)

Fix: Manage apps layout was a bit confuse

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;
+}

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

@@ -10,6 +10,9 @@
 					<span class="rc-switch__button">
 						<span class="rc-switch__button-inside"></span>
 					</span>
+					<span class="rc-switch__text">
+						{{_ "Activate"}}
+					</span>
 				</label>
 			</div>
 

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>

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

@@ -1,9 +1,21 @@
 import { AppEvents } from '../communication';
+const ENABLED_STATUS = ['auto_enabled', 'manually_enabled'];
+const enabled = ({status}) => ENABLED_STATUS.includes(status);
+const sortByStatus = (a, b) => {
+	if (enabled(a)) {
+		if (enabled(b)) {
+			return a.name > b.name;
+		}
+		return -1;
+	}
+	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 +65,15 @@ Template.apps.helpers({
 		return false;
 	},
 	apps() {
-		return Template.instance().apps.get();
+		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 enabled({status}) ? 'active' : '';
 	}
 });
 
@@ -70,8 +87,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);
 	}
 });