Merge "Web UI: substring search for builds, buildsets"

releasenotes/notes/substring-web-search-362ede4088338005.yaml

@@ -0,0 +1,7 @@
+---
+features:
+  - |
+    Zuul now supports substring searches on the Builds and Buildsets pages on
+    its web UI. This is supported by placing asterisk (*) placeholders anywhere
+    in the search term, representing any characters. This is enabled for job
+    name, branch, project, and pipeline filters.

web/src/containers/FilterToolbar.jsx

@@ -30,6 +30,7 @@ import {
   ToolbarGroup,
   ToolbarItem,
   ToolbarToggleGroup,
+  Tooltip,
 } from '@patternfly/react-core'
 import { FilterIcon, SearchIcon } from '@patternfly/react-icons'
 
@@ -149,6 +150,7 @@ function FilterToolbar(props) {
           isOpen={isCategoryDropdownOpen}
           dropdownItems={filterCategories.filter(
             (category) => (category.type === 'search' ||
+              category.type === 'fuzzy-search' ||
               category.type === 'select' ||
               category.type === 'ternary' ||
               category.type === 'checkbox')
@@ -185,6 +187,31 @@ function FilterToolbar(props) {
           </Button>
         </InputGroup>
       )
+    } else if (category.type === 'fuzzy-search') {
+      return (
+        <InputGroup>
+          <Tooltip
+            content="Wildcard search with * placeholders">
+            <TextInput
+              name={`${category.key}-input`}
+              id={`${category.key}-input`}
+              type="search"
+              aria-label={`${category.key} filter`}
+              onChange={handleInputChange}
+              value={inputValue}
+              placeholder={category.placeholder}
+              onKeyDown={(event) => handleInputSend(event, category)}
+            />
+          </Tooltip>
+          <Button
+            variant={ButtonVariant.control}
+            aria-label="search button for search input"
+            onClick={(event) => handleInputSend(event, category)}
+          >
+            <SearchIcon />
+          </Button>
+        </InputGroup>
+      )
     } else if (category.type === 'select') {
       return (
         <InputGroup>

web/src/pages/Builds.jsx

@@ -43,25 +43,25 @@ class BuildsPage extends React.Component {
         key: 'job_name',
         title: 'Job',
         placeholder: 'Filter by Job...',
-        type: 'search',
+        type: 'fuzzy-search',
       },
       {
         key: 'project',
         title: 'Project',
         placeholder: 'Filter by Project...',
-        type: 'search',
+        type: 'fuzzy-search',
       },
       {
         key: 'branch',
         title: 'Branch',
         placeholder: 'Filter by Branch...',
-        type: 'search',
+        type: 'fuzzy-search',
       },
       {
         key: 'pipeline',
         title: 'Pipeline',
         placeholder: 'Filter by Pipeline...',
-        type: 'search',
+        type: 'fuzzy-search',
       },
       {
         key: 'change',
@@ -195,7 +195,7 @@ class BuildsPage extends React.Component {
       this.updateData(filters)
     }
   }
-  
+
   filterInputValidation = (filterKey, filterValue) => {
     // Input value should not be empty for all cases
     if (!filterValue) {

web/src/pages/Buildsets.jsx

@@ -42,19 +42,19 @@ class BuildsetsPage extends React.Component {
         key: 'project',
         title: 'Project',
         placeholder: 'Filter by Project...',
-        type: 'search',
+        type: 'fuzzy-search',
       },
       {
         key: 'branch',
         title: 'Branch',
         placeholder: 'Filter by Branch...',
-        type: 'search',
+        type: 'fuzzy-search',
       },
       {
         key: 'pipeline',
         title: 'Pipeline',
         placeholder: 'Filter by Pipeline...',
-        type: 'search',
+        type: 'fuzzy-search',
       },
       {
         key: 'change',