https://github.com/NodeBB/NodeBB/issues/12824

search all plugins when on download tab

public/src/admin/extend/plugins.js

@@ -11,22 +11,13 @@ define('admin/extend/plugins', [
 	const Plugins = {};
 	Plugins.init = function () {
 		const pluginsList = $('.plugins');
-		const numPlugins = pluginsList[0].querySelectorAll('li').length;
 		let pluginID;
 
-		if (!numPlugins) {
-			translator.translate('<li><p><i>[[admin/extend/plugins:none-found]]</i></p></li>', function (html) {
-				pluginsList.append(html);
-			});
-			return;
-		}
-
 		if (window.location.hash) {
 			$(`.nav-pills button[data-bs-target="${window.location.hash}"]`).trigger('click');
 		}
 
-		const searchInputEl = document.querySelector('#plugin-search');
+		const searchInputEl = $('#plugin-search');
-		searchInputEl.value = '';
 
 		pluginsList.on('click', 'button[data-action="toggleActive"]', function () {
 			const pluginEl = $(this).parents('li');
@@ -159,13 +150,18 @@ define('admin/extend/plugins', [
 			});
 		});
 
-		$(searchInputEl).on('input propertychange', function () {
+		$(searchInputEl).on('input propertychange', utils.debounce(function () {
 			const term = $(this).val();
 			$('.plugins li').each(function () {
 				const pluginId = $(this).attr('data-plugin-id');
-				$(this).toggleClass('hide', pluginId && pluginId.indexOf(term) === -1);
+				$(this).toggleClass('hide', pluginId && !pluginId.includes(term));
 			});
 
+			const activeTab = $('#plugin-tabs [data-bs-target].active').attr('data-bs-target');
+			if (activeTab === '#download') {
+				searchAllPlugins(term);
+			}
+
 			const tabEls = document.querySelectorAll('.plugins .tab-pane');
 			tabEls.forEach((tabEl) => {
 				const remaining = tabEl.querySelectorAll('li:not(.hide)').length;
@@ -174,7 +170,7 @@ define('admin/extend/plugins', [
 					noticeEl.classList.toggle('hide', remaining !== 0);
 				}
 			});
-		});
+		}, 250));
 
 		$('#plugin-submit-usage').on('click', function () {
 			socket.emit('admin.config.setMultiple', {
@@ -256,11 +252,16 @@ define('admin/extend/plugins', [
 				});
 			});
 		});
-
-		populateUpgradeablePlugins();
-		populateActivePlugins();
 	};
 
+	async function searchAllPlugins(term) {
+		const { download, incompatible } = ajaxify.data;
+		const all = term ? download.concat(incompatible) : download;
+		const found = all.filter(p => p && p.name.includes(term)).slice(0, 100);
+		const html = await app.parseAndTranslate('admin/extend/plugins', 'download', { download: found });
+		$('#download ul').html(html);
+	}
+
 	function confirmInstall(pluginID, callback) {
 		bootbox.confirm(translator.compile('admin/extend/plugins:alert.possibly-incompatible', pluginID), function (confirm) {
 			callback(confirm);
@@ -348,23 +349,5 @@ define('admin/extend/plugins', [
 		}).fail(callback);
 	};
 
-	function populateUpgradeablePlugins() {
-		$('#installed ul li').each(function () {
-			if ($(this).find('[data-action="upgrade"]').length) {
-				$('#upgrade ul').append($(this).clone(true));
-			}
-		});
-	}
-
-	function populateActivePlugins() {
-		$('#installed ul li').each(function () {
-			if ($(this).hasClass('active')) {
-				$('#active ul').append($(this).clone(true));
-			} else {
-				$('#deactive ul').append($(this).clone(true));
-			}
-		});
-	}
-
 	return Plugins;
 });

src/controllers/admin/plugins.js

@@ -17,6 +17,7 @@ pluginsController.get = async function (req, res) {
 	const compatiblePkgNames = compatible.map(pkgData => pkgData.name);
 	const installedPlugins = compatible.filter(plugin => plugin && (plugin.installed || (nconf.get('plugins:active') && plugin.active)));
 	const activePlugins = all.filter(plugin => plugin && (plugin.installed || nconf.get('plugins:active')) && plugin.active);
+	const inactivePlugins = all.filter(plugin => plugin && (plugin.installed || nconf.get('plugins:active')) && !plugin.active);
 
 	const trendingScores = trending.reduce((memo, cur) => {
 		memo[cur.label] = cur.value;
@@ -30,18 +31,17 @@ pluginsController.get = async function (req, res) {
 			return plugin;
 		});
 
+	const upgrade = compatible.filter(p => p.installed && p.outdated);
 	res.render('admin/extend/plugins', {
 		installed: installedPlugins,
 		installedCount: installedPlugins.length,
+		active: activePlugins,
 		activeCount: activePlugins.length,
-		inactiveCount: Math.max(0, installedPlugins.length - activePlugins.length),
+		inactive: inactivePlugins,
+		inactiveCount: inactivePlugins.length,
 		canChangeState: !nconf.get('plugins:active'),
-		upgradeCount: compatible.reduce((count, current) => {
+		upgrade: upgrade,
-			if (current.installed && current.outdated) {
+		upgradeCount: upgrade.length,
-				count += 1;
-			}
-			return count;
-		}, 0),
 		download: compatible.filter(plugin => !plugin.installed),
 		incompatible: all.filter(plugin => !compatiblePkgNames.includes(plugin.name)),
 		trending: trendingPlugins,

src/views/admin/extend/plugins.tpl

@@ -13,7 +13,7 @@
 		{{{ if !canChangeState }}}
 		<div class="alert alert-warning">[[error:plugins-set-in-configuration]]</div>
 		{{{ end }}}
-		<ul class="nav nav-pills mb-3">
+		<ul class="nav nav-pills mb-3" id="plugin-tabs">
 			<li class="nav-item">
 				<button class="nav-link" data-bs-target="#trending" data-bs-toggle="tab">
 					[[admin/extend/plugins:trending]]
@@ -53,7 +53,9 @@
 			<div class="col-lg-9">
 				<div class="tab-content">
 					<div class="tab-pane fade" id="trending">
+						{{{ if !trending.length }}}
 						<!-- IMPORT admin/partials/plugins/no-plugins.tpl -->
+						{{{ end }}}
 						<ul class="trending list-unstyled">
 							{{{ each trending }}}
 							<!-- IMPORT admin/partials/installed_plugin_item.tpl -->
@@ -61,7 +63,7 @@
 						</ul>
 					</div>
 					<div class="tab-pane fade show active" id="installed">
-						<!-- IMPORT admin/partials/plugins/no-plugins.tpl -->
+						<div class="alert alert-info no-plugins {{{ if installed.length }}}hide{{{ end }}}">[[admin/extend/plugins:none-found]]</div>
 						<ul class="installed list-unstyled">
 							{{{ each installed }}}
 							<!-- IMPORT admin/partials/installed_plugin_item.tpl -->
@@ -69,19 +71,31 @@
 						</ul>
 					</div>
 					<div class="tab-pane fade" id="active">
-						<!-- IMPORT admin/partials/plugins/no-plugins.tpl -->
+						<div class="alert alert-info no-plugins {{{ if active.length }}}hide{{{ end }}}">[[admin/extend/plugins:none-found]]</div>
-						<ul class="active list-unstyled"></ul>
+						<ul class="active list-unstyled">
+							{{{ each active }}}
+							<!-- IMPORT admin/partials/installed_plugin_item.tpl -->
+							{{{ end }}}
+						</ul>
 					</div>
 					<div class="tab-pane fade" id="deactive">
-						<!-- IMPORT admin/partials/plugins/no-plugins.tpl -->
+						<div class="alert alert-info no-plugins {{{ if inactive.length }}}hide{{{ end }}}">[[admin/extend/plugins:none-found]]</div>
-						<ul class="deactive list-unstyled"></ul>
+						<ul class="deactive list-unstyled">
+							{{{ each inactive }}}
+							<!-- IMPORT admin/partials/installed_plugin_item.tpl -->
+							{{{ end }}}
+						</ul>
 					</div>
 					<div class="tab-pane fade" id="upgrade">
-						<!-- IMPORT admin/partials/plugins/no-plugins.tpl -->
+						<div class="alert alert-info no-plugins {{{ if upgrade.length }}}hide{{{ end }}}">[[admin/extend/plugins:none-found]]</div>
-						<ul class="upgrade list-unstyled"></ul>
+						<ul class="upgrade list-unstyled">
+							{{{ each upgrade }}}
+							<!-- IMPORT admin/partials/installed_plugin_item.tpl -->
+							{{{ end }}}
+						</ul>
 					</div>
 					<div class="tab-pane fade" id="download">
-						<!-- IMPORT admin/partials/plugins/no-plugins.tpl -->
+						<div class="alert alert-info no-plugins {{{ if download.length }}}hide{{{ end }}}">[[admin/extend/plugins:none-found]]</div>
 						<ul class="download list-unstyled">
 							{{{ each download }}}
 							<!-- IMPORT admin/partials/download_plugin_item.tpl -->

src/views/admin/partials/plugins/no-plugins.tpl

@@ -1 +0,0 @@
-<div class="alert alert-info no-plugins hide">[[admin/extend/plugins:none-found]]</div>