tasks can be searched for

Author: desheikh

app/controllers/maintenance_tasks/application_controller.rb

@@ -11,15 +11,15 @@ class ApplicationController < MaintenanceTasks.parent_controller.constantize
       policy.style_src_elem(
         BULMA_CDN,
         # <style> tag in app/views/layouts/maintenance_tasks/application.html.erb
-        "'sha256-bPoBNSY4OPj4PVy3JR+57IqkZNesZ1sKbHQAhkSThxQ='",
+        "'sha256-Cb+Ml3lY17UKzW2LeTuFDi7IgPXk0ICA4TLWXd7mhAA='",
       )
       capybara_lockstep_scripts = [
         "'sha256-1AoN3ZtJC5OvqkMgrYvhZjp4kI8QjJjO7TAyKYiDw+U='",
         "'sha256-QVSzZi6ZsX/cu4h+hIs1iVivG1BxUmJggiEsGDIXBG0='", # with debug on
       ] if defined?(Capybara::Lockstep)
       policy.script_src_elem(
         # <script> tag in app/views/layouts/maintenance_tasks/application.html.erb
-        "'sha256-NiHKryHWudRC2IteTqmY9v1VkaDUA/5jhgXkMTkgo2w='",
+        "'sha256-n0UyWNeUyfUfrkvN/G1LqwSiN8WTlXTbA2BCEPmtKrQ='",
         # <script> tag for capybara-lockstep
         *capybara_lockstep_scripts,
       )

app/views/layouts/maintenance_tasks/_navbar.html.erb

@@ -2,4 +2,19 @@
   <div class="navbar-brand">
     <%= link_to 'Maintenance Tasks', root_path, class: 'navbar-item is-size-4 has-text-weight-semibold has-text-danger' %>
   </div>
+  <% if action_name == "index" %>
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="task-search" data-tasks-path="<%= tasks_path %>">
+          <%= text_field_tag :task_search, nil,
+            id: "task-search-input",
+            class: "input",
+            placeholder: "Search tasks...",
+            autocomplete: "off",
+            aria: { label: "Search tasks", autocomplete: "list", controls: "task-search-results" } %>
+          <div class="task-search-results" id="task-search-results" role="listbox"></div>
+        </div>
+      </div>
+    </div>
+  <% end %>
 </nav>

app/views/layouts/maintenance_tasks/application.html.erb

@@ -123,6 +123,58 @@
         padding-left: 0.5rem;
         border-left: 1px solid #dbdbdb;
       }
+
+      /* Task search styles */
+      .task-search {
+        position: relative;
+        width: 300px;
+      }
+      .task-search-results {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: #fff;
+        border: 1px solid #dbdbdb;
+        border-radius: 4px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        max-height: 400px;
+        overflow-y: auto;
+        z-index: 100;
+        display: none;
+      }
+      .task-search-results.is-active {
+        display: block;
+      }
+      .task-search-results a {
+        display: block;
+        padding: 0.75rem 1rem;
+        color: #363636;
+        border-bottom: 1px solid #f5f5f5;
+        text-decoration: none;
+      }
+      .task-search-results a:last-child {
+        border-bottom: none;
+      }
+      .task-search-results a:hover,
+      .task-search-results a.is-selected {
+        background-color: #485fc7;
+        color: #fff;
+      }
+      .task-search-results .no-results {
+        padding: 0.75rem 1rem;
+        color: #7a7a7a;
+        font-style: italic;
+      }
+      .task-search-results mark {
+        background-color: #ffe08a;
+        color: inherit;
+        padding: 0;
+      }
+      .task-search-results a:hover mark,
+      .task-search-results a.is-selected mark {
+        background-color: rgba(255,255,255,0.3);
+      }
     </style>
 
     <script>
@@ -147,6 +199,141 @@
         }, 3000)
       }
       document.addEventListener('DOMContentLoaded', refresh)
+
+      // Task search functionality
+      function initTaskSearch() {
+        const searchContainer = document.querySelector('.task-search')
+        const searchInput = document.getElementById('task-search-input')
+        const searchResults = document.getElementById('task-search-results')
+        if (!searchInput || !searchResults || !searchContainer) return
+
+        const tasksBasePath = searchContainer.dataset.tasksPath
+        let tasks = []
+        let selectedIndex = -1
+
+        const loadTasks = () => {
+          const taskLinks = document.querySelectorAll('a[href*="/tasks/"]')
+          const taskSet = new Set()
+          taskLinks.forEach(link => {
+            const match = link.href.match(/\/tasks\/([^?/]+)/)
+            if (match) {
+              const taskName = decodeURIComponent(match[1])
+              if (taskName && !taskName.includes('runs')) {
+                taskSet.add(taskName)
+              }
+            }
+          })
+          tasks = Array.from(taskSet).sort()
+        }
+
+        const fuzzyMatch = (text, query) => {
+          const lowerText = text.toLowerCase()
+          const lowerQuery = query.toLowerCase()
+          let score = 0
+          let textIndex = 0
+          let matchIndices = []
+
+          for (let i = 0; i < lowerQuery.length; i++) {
+            const char = lowerQuery[i]
+            const foundIndex = lowerText.indexOf(char, textIndex)
+            if (foundIndex === -1) return null
+
+            matchIndices.push(foundIndex)
+            score += foundIndex === textIndex ? 10 : 1
+            if (foundIndex === 0 || text[foundIndex - 1] === ':') score += 5
+            textIndex = foundIndex + 1
+          }
+
+          return { score, matchIndices }
+        }
+
+        const escapeHtml = (text) => {
+          const div = document.createElement('div')
+          div.textContent = text
+          return div.innerHTML
+        }
+
+        const highlightMatch = (text, matchIndices) => {
+          let result = ''
+          let lastIndex = 0
+          matchIndices.forEach(idx => {
+            result += escapeHtml(text.slice(lastIndex, idx))
+            result += '<mark>' + escapeHtml(text[idx]) + '</mark>'
+            lastIndex = idx + 1
+          })
+          result += escapeHtml(text.slice(lastIndex))
+          return result
+        }
+
+        const renderResults = (query) => {
+          if (!query.trim()) {
+            searchResults.classList.remove('is-active')
+            return
+          }
+
+          const matches = tasks
+            .map(task => ({ task, match: fuzzyMatch(task, query) }))
+            .filter(item => item.match)
+            .sort((a, b) => b.match.score - a.match.score)
+            .slice(0, 10)
+
+          if (matches.length === 0) {
+            searchResults.innerHTML = '<div class="no-results">No tasks found</div>'
+          } else {
+            searchResults.innerHTML = matches.map((item, index) =>
+              '<a href="' + tasksBasePath + '/' + encodeURIComponent(item.task) + '" class="' + (index === selectedIndex ? 'is-selected' : '') + '">' + highlightMatch(item.task, item.match.matchIndices) + '</a>'
+            ).join('')
+          }
+          searchResults.classList.add('is-active')
+          selectedIndex = -1
+        }
+
+        const updateSelection = (items) => {
+          items.forEach((item, index) => {
+            item.classList.toggle('is-selected', index === selectedIndex)
+          })
+          if (selectedIndex >= 0) {
+            items[selectedIndex].scrollIntoView({ block: 'nearest' })
+          }
+        }
+
+        const handleKeydown = (e) => {
+          const items = searchResults.querySelectorAll('a')
+          if (!items.length) return
+
+          if (e.key === 'ArrowDown') {
+            e.preventDefault()
+            selectedIndex = Math.min(selectedIndex + 1, items.length - 1)
+            updateSelection(items)
+          } else if (e.key === 'ArrowUp') {
+            e.preventDefault()
+            selectedIndex = Math.max(selectedIndex - 1, -1)
+            updateSelection(items)
+          } else if (e.key === 'Enter' && selectedIndex >= 0) {
+            e.preventDefault()
+            items[selectedIndex].click()
+          } else if (e.key === 'Escape') {
+            searchResults.classList.remove('is-active')
+            searchInput.blur()
+          }
+        }
+
+        searchInput.addEventListener('input', e => {
+          loadTasks()
+          renderResults(e.target.value)
+        })
+        searchInput.addEventListener('keydown', handleKeydown)
+        searchInput.addEventListener('focus', () => {
+          loadTasks()
+          if (searchInput.value.trim()) renderResults(searchInput.value)
+        })
+        document.addEventListener('click', e => {
+          if (!e.target.closest('.task-search')) {
+            searchResults.classList.remove('is-active')
+          }
+        })
+      }
+      document.addEventListener('DOMContentLoaded', initTaskSearch)
     </script>
   </head>
 

test/system/maintenance_tasks/tasks_test.rb

@@ -266,6 +266,31 @@ class TasksTest < ApplicationSystemTestCase
       end
     end
 
+    test "search filters tasks by name" do
+      visit maintenance_tasks_path
+
+      # Search input should be visible
+      assert_selector "#task-search-input"
+
+      # Type in search box
+      fill_in "task-search-input", with: "Update"
+
+      # Should show matching results in dropdown
+      within ".task-search-results" do
+        assert_link "Maintenance::UpdatePostsTask"
+        assert_link "Maintenance::UpdatePostsInBatchesTask"
+        assert_no_link "Maintenance::ErrorTask"
+      end
+
+      # Click on a result to navigate
+      within ".task-search-results" do
+        click_on "Maintenance::UpdatePostsTask"
+      end
+
+      # Should be on the task page
+      assert_title "Maintenance::UpdatePostsTask"
+    end
+
     test "sidebar displays namespaces and filters tasks" do
       visit maintenance_tasks_path