- {% for item in submenu.sorted_items %}
+ {% for item in menu_items %}
{% if not show_disabled or item.is_enabled %}
{% if advanced_mode or not item.advanced %}
{% include "card.html" %}
@@ -34,7 +36,7 @@
- {% for item in submenu.sorted_items %}
+ {% for item in menu_items %}
{% if not item.is_enabled %}
{% if advanced_mode or not item.advanced %}
{% include "card.html" %}
diff --git a/plinth/tests/tags/__init__.py b/plinth/tests/tags/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/plinth/tests/tags/test_functional.py b/plinth/tests/tags/test_functional.py
new file mode 100644
index 000000000..85c8bd6f1
--- /dev/null
+++ b/plinth/tests/tags/test_functional.py
@@ -0,0 +1,60 @@
+# SPDX-License-Identifier: AGPL-3.0-or-later
+"""
+Functional, browser based tests for transmission app.
+"""
+
+import pytest
+
+from selenium.webdriver.common.keys import Keys
+from plinth.tests import functional
+
+pytestmark = [pytest.mark.tags]
+
+
+def _is_app_listed(session_browser, app):
+ """Assert that the specified app is listed on the page."""
+ app_links = session_browser.links.find_by_href(f'/plinth/apps/{app}/')
+ assert len(app_links) == 1
+
+
+@pytest.fixture(autouse=True)
+def fixture_bittorrent_tag(session_browser):
+ """Click on the BitTorrent tag."""
+ bittorrent_tag = '/plinth/apps/?tag=BitTorrent'
+ functional.login(session_browser)
+ functional.nav_to_module(session_browser, 'transmission')
+ with functional.wait_for_page_update(session_browser, timeout=10,
+ expected_url=bittorrent_tag):
+ session_browser.links.find_by_href(bittorrent_tag).click()
+
+
+def test_bittorrent_tag(session_browser):
+ """Test that the BitTorrent tag lists Deluge and Transmission."""
+ _is_app_listed(session_browser, 'deluge')
+ _is_app_listed(session_browser, 'transmission')
+
+
+def test_search_for_tag(session_browser):
+ """Test that searching for a tag returns the expected apps."""
+ search_input = session_browser.driver.find_element_by_id('add-tag-input')
+ with functional.wait_for_page_update(
+ session_browser, timeout=10,
+ expected_url='/plinth/apps/?tag=BitTorrent&tag=File%20Sharing'):
+ search_input.click()
+ search_input.send_keys('file')
+ search_input.send_keys(Keys.ENTER)
+ for app in ['deluge', 'nextcloud', 'sharing', 'syncthing', 'transmission']:
+ _is_app_listed(session_browser, app)
+
+
+def test_click_on_tag(session_browser):
+ """Test that clicking on a tag lists the expected apps."""
+ search_input = session_browser.driver.find_element_by_id('add-tag-input')
+ with functional.wait_for_page_update(
+ session_browser, timeout=10,
+ expected_url='/plinth/apps/?tag=BitTorrent&tag=Cloud%20Storage'):
+ search_input.click()
+ session_browser.find_by_css(
+ ".dropdown-item[data-value='Cloud Storage']").click()
+ for app in ['deluge', 'nextcloud', 'syncthing', 'transmission']:
+ _is_app_listed(session_browser, app)
diff --git a/plinth/views.py b/plinth/views.py
index be07617a4..ddd4eb312 100644
--- a/plinth/views.py
+++ b/plinth/views.py
@@ -23,6 +23,7 @@ from django.views.generic.edit import FormView
from stronghold.decorators import public
from plinth import app as app_module
+from plinth import menu
from plinth.daemon import app_is_running
from plinth.modules.config import get_advanced_mode
from plinth.modules.firewall.components import get_port_forwarding_info
@@ -120,13 +121,61 @@ def index(request):
class AppsIndexView(TemplateView):
- """View for apps index"""
+ """View for apps index.
+
+ This view supports filtering apps by one or more tags. If no tags are
+ provided, it will show all the apps. If one or more tags are provided,
+ it will select apps matching any of the provided tags.
+ """
template_name = 'apps.html'
+ @staticmethod
+ def _pick_menu_items(menu_items, selected_tags):
+ """Return a sorted list of menu items filtered by tags."""
+
+ def _mismatch_map(menu_item) -> list[bool]:
+ """Return a list of mismatches for selected tags.
+
+ A mismatch is when a selected tag is *not* present in the list of
+ tags for menu item.
+ """
+ menu_tags = set(menu_item.app.info.tags)
+ return [tag not in menu_tags for tag in selected_tags]
+
+ def _sort_key(menu_item):
+ """Returns a comparable tuple to sort menu items.
+
+ Sort items by tag match count first, then by the order of matched
+ tags in user specified order, then by the order set by menu item,
+ and then by the name of the menu item in current locale (by
+ configured collation order).
+ """
+ return (_mismatch_map(menu_item).count(True),
+ _mismatch_map(menu_item), menu_item.order,
+ menu_item.name.lower())
+
+ # Filter out menu items that don't match any of the selected tags. If
+ # no tags are selected, return all menu items. Otherwise, return all
+ # menu items that have at least one matching tag.
+ filtered_menu_items = [
+ menu_item for menu_item in menu_items
+ if (not selected_tags) or (not all(_mismatch_map(menu_item)))
+ ]
+
+ return sorted(filtered_menu_items, key=_sort_key)
+
def get_context_data(self, *args, **kwargs):
context = super().get_context_data(*args, **kwargs)
context['show_disabled'] = True
context['advanced_mode'] = get_advanced_mode()
+
+ tags = self.request.GET.getlist('tag', [])
+ menu_items = menu.main_menu.active_item(self.request).items
+
+ context['tags'] = tags
+ context['all_tags'] = app_module.Info.list_tags()
+ context['menu_items'] = self._pick_menu_items(menu_items, tags)
+
return context
@@ -364,8 +413,9 @@ class SetupView(TemplateView):
context['setup_state'] = setup_state
context['operations'] = operation.manager.filter(app.app_id)
context['show_rerun_setup'] = False
- context['show_uninstall'] = (not app.info.is_essential and setup_state
- != app_module.App.SetupState.NEEDS_SETUP)
+ context['show_uninstall'] = (
+ not app.info.is_essential
+ and setup_state != app_module.App.SetupState.NEEDS_SETUP)
# Perform expensive operation only if needed.
if not context['operations']:
diff --git a/static/tags.js b/static/tags.js
new file mode 100644
index 000000000..822ec9b06
--- /dev/null
+++ b/static/tags.js
@@ -0,0 +1,170 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+/**
+ * @licstart The following is the entire license notice for the JavaScript
+ * code in this page.
+ *
+ * This file is part of FreedomBox.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ *
+ * @licend The above is the entire license notice for the JavaScript code
+ * in this page.
+ */
+
+/**
+ * Update the URL path and history based on the selected tags.
+ *
+ * If no tags are selected, redirects to the base apps path. Otherwise,
+ * constructs a new URL with query parameters for each tag and updates
+ * the browser history.
+ *
+ * @param {string[]} tags - An array of selected tag names.
+ */
+function updatePath(tags) {
+ const appsPath = window.location.pathname;
+ if (tags.length === 0) {
+ this.location.assign(appsPath);
+ } else {
+ let queryParams = tags.map(tag => `tag=${tag}`).join('&');
+ let newPath = `${appsPath}?${queryParams}`;
+ this.history.pushState({ tags: tags }, '', newPath);
+ this.location.assign(newPath);
+ }
+}
+
+/**
+ * Get a list of tags currently displayed, excluding a specific tag if provided.
+ *
+ * Iterates through the tag badges in the UI, extracts their text content,
+ * and returns an array of tag names.
+ *
+ * @param {string} [tagToRemove] - The name of the tag to exclude.
+ * @returns {string[]} An array of tag names currently displayed.
+ */
+function getTags(tagToRemove) {
+ const tagBadges = document.querySelectorAll('#selected-tags .tag-badge');
+ return Array.from(tagBadges)
+ .map(tag => tag.dataset.tag)
+ .filter(tagName => tagName !== tagToRemove);
+}
+
+/**
+ * Filter and highlight the best matching tag based on the search term.
+ *
+ * This function updates the visibility and highlighting of dropdown items
+ * to match the user's input in the search box. It determines the best
+ * matching item and marks it as active.
+ *
+ * @param {KeyboardEvent} event - The keyboard event that triggered the search.
+ */
+function findMatchingTag(addTagInput, dropdownItems) {
+ const searchTerm = addTagInput.value.toLowerCase().trim();
+
+ // Remove highlighting from all items
+ dropdownItems.forEach(item => item.classList.remove('active'));
+
+ let bestMatch = null;
+ dropdownItems.forEach(item => {
+ const text = item.textContent.toLowerCase();
+ if (text.includes(searchTerm)) {
+ item.style.display = 'block';
+ function matchesEarly () {
+ return text.indexOf(searchTerm) < bestMatch.textContent.toLowerCase().indexOf(searchTerm);
+ };
+ if (bestMatch === null || matchesEarly()) {
+ bestMatch = item;
+ }
+ } else {
+ item.style.display = 'none';
+ }
+ });
+
+ // Highlight the best match
+ if (bestMatch) {
+ bestMatch.classList.add('active');
+ }
+}
+
+/**
+ * Manage tag-related UI interactions for filtering and displaying apps.
+ *
+ * This script manages the user interface for filtering apps based on
+ * selected tags. It provides functionality for adding and removing tags,
+ * updating the URL based on selected tags, and displaying a set of
+ * available tags in a searchable dropdown.
+ */
+document.addEventListener('DOMContentLoaded', function () {
+
+ // Remove Tag handler.
+ document.querySelectorAll('.remove-tag').forEach(button => {
+ button.addEventListener('click', () => {
+ let tag = button.dataset.tag;
+ let tags = getTags(tag);
+ updatePath(tags);
+ });
+ });
+
+ /**
+ * Searchable dropdown for selecting tags.
+ *
+ * As the user types in the input field, the dropdown list is filtered
+ * to show only matching items. The best matching item (first match if
+ * multiple match) is highlighted. Pressing Enter selects the
+ * highlighted item and adds it as a tag.
+ */
+ const addTagInput = document.getElementById('add-tag-input');
+ const dropdownItems = document.querySelectorAll('li.dropdown-item');
+
+ var timeoutId;
+ addTagInput.addEventListener('keyup', (event) => {
+ clearTimeout(timeoutId);
+ // Select the active tag if the user pressed Enter
+ if (event.key === 'Enter') {
+ dropdownItems.forEach(item => {
+ if (item.classList.contains('active')) {
+ item.click();
+ }
+ });
+ }
+ // Debounce the user input for search with 300ms delay.
+ timeoutId = setTimeout(findMatchingTag(addTagInput, dropdownItems), 300);
+ });
+
+ dropdownItems.forEach(item => {
+ item.addEventListener('click', () => {
+ const selectedTag = item.dataset.value;
+
+ // Add the selected tag and update the path.
+ let tags = getTags('');
+ tags.push(selectedTag);
+ updatePath(tags);
+
+ // Reset the input field and dropdown.
+ addTagInput.value = '';
+ dropdownItems.forEach(item => {
+ item.style.display = '';
+ item.classList.remove('active');
+ });
+ });
+ });
+
+ // Handle browser back/forward navigation.
+ window.addEventListener('popstate', function (event) {
+ if (event.state && event.state.tags) {
+ updatePath(event.state.tags);
+ }
+ });
+});
+
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index f2ff58061..bc636d527 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -309,7 +309,6 @@ html {
}
#wrapper {
- min-height: 100%;
position: relative;
}
@@ -321,6 +320,59 @@ html {
margin-bottom: 1.25rem;
}
+/* Tag Input Container */
+.tag-input {
+ display: flex;
+ align-items: center;
+ border: 1px solid #ced4da;
+ border-radius: .25rem;
+ padding: .375rem .75rem;
+ width: 100%;
+ background-color: #fff;
+ margin-bottom: 3rem;
+}
+
+/* Selected Tags */
+.tag-input #selected-tags {
+ display: flex;
+ flex-wrap: wrap;
+ margin-right: .5rem;
+}
+
+.tag-input .tag {
+ background-color: #e9ecef; /* Light gray background */
+ border-radius: .25rem;
+ padding: .25rem .5rem;
+ margin-right: .25rem;
+ margin-bottom: .25rem;
+ display: flex;
+ align-items: center;
+}
+
+/* Remove tag button */
+.tag-badge .remove-tag {
+ background-color: #f8f9fa; /* Match the tag's background color */
+ border: none;
+ padding: 0.25rem 0.5rem;
+ cursor: pointer;
+}
+
+/* Adjust input field width */
+.tag-input input[type="search"] {
+ flex-grow: 1;
+ border: none;
+ outline: none;
+ box-shadow: none;
+ width: auto;
+ min-width: 3rem;
+}
+
+/* dropdown-menu for tags is a scrollable list */
+.tag-input .dropdown-menu {
+ bottom: calc(-100% - 10px);
+ overflow-y: auto;
+}
+
@media (min-width: 768px) {
.content-container {
padding: 1.5rem 3rem 3rem;