TRT-2764: Sippy tests page: search bar does not complete search until page is refreshed

sippy-ng/src/component_readiness/RegressedTestsPanel.js

@@ -373,6 +373,7 @@ export default function RegressedTestsPanel(props) {
             setFilterModel: setFilterModel,
             clearSearch: () => requestSearch(''),
             doSearch: requestSearch,
+            searchField: 'test_name',
             autocompleteData: regressedTests,
             downloadDataFunc: () => {
               return filteredTests

sippy-ng/src/component_readiness/TriagedRegressionTestList.js

@@ -352,6 +352,7 @@ export default function TriagedRegressionTestList(props) {
               setFilterModel: setFilterModel,
               clearSearch: () => requestSearch(''),
               doSearch: requestSearch,
+              searchField: 'test_name',
               autocompleteData: triagedRegressions,
               downloadDataFunc: () => {
                 return filteredRegressions

sippy-ng/src/component_readiness/TriagedRegressions.js

@@ -407,6 +407,7 @@ export default function TriagedRegressions({
             setFilterModel: setFilterModel,
             clearSearch: () => requestSearch(''),
             doSearch: requestSearch,
+            searchField: 'description',
             autocompleteData: triageEntries,
             downloadDataFunc: () => {
               return filteredTriageEntries

sippy-ng/src/datagrid/GridToolbar.js

@@ -8,7 +8,7 @@ import GridToolbarPeriodSelector from '../datagrid/GridToolbarPeriodSelector'
 import GridToolbarViewSelector from './GridToolbarViewSelector'
 import IconButton from '@mui/material/IconButton'
 import PropTypes from 'prop-types'
-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect, useRef } from 'react'
 import SearchIcon from '@mui/icons-material/Search'
 import TextField from '@mui/material/TextField'
 
@@ -39,6 +39,29 @@ export default function GridToolbar(props) {
   const classes = useStyles(theme)
 
   const [search, setSearch] = React.useState('')
+  const initializedFromFilter = useRef(false)
+
+  useEffect(() => {
+    if (
+      initializedFromFilter.current ||
+      !props.searchField ||
+      !props.filterModel ||
+      !props.filterModel.items
+    ) {
+      return
+    }
+    const filtersForField = props.filterModel.items.filter(
+      (f) => f.columnField === props.searchField
+    )
+    if (filtersForField.length !== 1) {
+      return
+    }
+    const filter = filtersForField[0]
+    if (filter.operatorValue === 'contains' && filter.value) {
+      setSearch(filter.value)
+      initializedFromFilter.current = true
+    }
+  }, [props.searchField, props.filterModel])
 
   return (
     <div className={classes.root}>
@@ -92,7 +115,6 @@ export default function GridToolbar(props) {
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             onKeyDown={(e) => e.key === 'Enter' && props.doSearch(search)}
-            onBlur={() => props.doSearch(search)}
             placeholder="Search…"
             InputProps={{
               endAdornment: (
@@ -145,4 +167,5 @@ GridToolbar.propTypes = {
   downloadDataFunc: PropTypes.func,
   downloadFilePrefix: PropTypes.string,
   autocompleteData: PropTypes.array,
+  searchField: PropTypes.string,
 }

sippy-ng/src/jobs/JobAnalysis.js

@@ -602,6 +602,7 @@ export function JobAnalysis(props) {
                           setFilterModel: setTestFilter,
                           clearSearch: () => requestSearch(''),
                           doSearch: requestSearch,
+                          searchField: 'name',
                         },
                       }}
                     />

sippy-ng/src/jobs/JobRunsTable.js

@@ -468,17 +468,17 @@ export default function JobRunsTable(props) {
   }
 
   const requestSearch = (searchValue) => {
-    const currentFilters = filterModel
-    currentFilters.items = currentFilters.items.filter(
-      (f) => f.columnField !== 'job'
-    )
-    currentFilters.items.push({
+    const newItems = filterModel.items.filter((f) => f.columnField !== 'job')
+    newItems.push({
       id: 99,
       columnField: 'job',
       operatorValue: 'contains',
       value: searchValue,
     })
-    setFilterModel(currentFilters)
+    setFilterModel({
+      ...filterModel,
+      items: newItems,
+    })
   }
 
   useEffect(() => {
@@ -655,6 +655,7 @@ export default function JobRunsTable(props) {
           columns: columns,
           clearSearch: () => requestSearch(''),
           doSearch: requestSearch,
+          searchField: 'job',
           filterModel: filterModel,
           setFilterModel: setFilterModel,
           addFilters: (m) => addFilters(m),

sippy-ng/src/jobs/JobTable.js

@@ -533,17 +533,17 @@ function JobTable(props) {
   }
 
   const requestSearch = (searchValue) => {
-    const currentFilters = filterModel
-    currentFilters.items = currentFilters.items.filter(
-      (f) => f.columnField !== 'name'
-    )
-    currentFilters.items.push({
+    const newItems = filterModel.items.filter((f) => f.columnField !== 'name')
+    newItems.push({
       id: 99,
       columnField: 'name',
       operatorValue: 'contains',
       value: searchValue,
     })
-    setFilterModel(currentFilters)
+    setFilterModel({
+      ...filterModel,
+      items: newItems,
+    })
   }
 
   useEffect(() => {
@@ -708,6 +708,7 @@ function JobTable(props) {
             columns: gridView.filterColumns,
             clearSearch: () => requestSearch(''),
             doSearch: requestSearch,
+            searchField: 'name',
             period: period,
             selectPeriod: setPeriod,
             addFilters: (m) => addFilters(m),

sippy-ng/src/releases/PayloadStreamTestFailures.js

@@ -116,17 +116,17 @@ function PayloadStreamTestFailures(props) {
   )
 
   const requestSearch = (searchValue) => {
-    const currentFilters = filterModel
-    currentFilters.items = currentFilters.items.filter(
-      (f) => f.columnField !== 'name'
-    )
-    currentFilters.items.push({
+    const newItems = filterModel.items.filter((f) => f.columnField !== 'name')
+    newItems.push({
       id: 99,
       columnField: 'name',
       operatorValue: 'contains',
       value: searchValue,
     })
-    setFilterModel(currentFilters)
+    setFilterModel({
+      ...filterModel,
+      items: newItems,
+    })
   }
 
   const addFilters = (filter) => {
@@ -257,6 +257,7 @@ function PayloadStreamTestFailures(props) {
               columns: columns,
               clearSearch: () => requestSearch(''),
               doSearch: requestSearch,
+              searchField: 'name',
               addFilters: addFilters,
               filterModel: filterModel,
               setFilterModel: setFilterModel,

sippy-ng/src/releases/PayloadStreamsTable.js

@@ -127,17 +127,19 @@ function PayloadStreamsTable(props) {
   )
 
   const requestSearch = (searchValue) => {
-    const currentFilters = filterModel
-    currentFilters.items = currentFilters.items.filter(
+    const newItems = filterModel.items.filter(
       (f) => f.columnField !== 'release_tag'
     )
-    currentFilters.items.push({
+    newItems.push({
       id: 99,
       columnField: 'release_tag',
       operatorValue: 'contains',
       value: searchValue,
     })
-    setFilterModel(currentFilters)
+    setFilterModel({
+      ...filterModel,
+      items: newItems,
+    })
   }
 
   const addFilters = (filter) => {
@@ -246,6 +248,7 @@ function PayloadStreamsTable(props) {
           columns: columns,
           clearSearch: () => requestSearch(''),
           doSearch: requestSearch,
+          searchField: 'release_tag',
           addFilters: addFilters,
           filterModel: filterModel,
           setFilterModel: setFilterModel,

sippy-ng/src/releases/PayloadTestFailures.js

@@ -95,17 +95,17 @@ function PayloadTestFailures(props) {
   )
 
   const requestSearch = (searchValue) => {
-    const currentFilters = filterModel
-    currentFilters.items = currentFilters.items.filter(
-      (f) => f.columnField !== 'name'
-    )
-    currentFilters.items.push({
+    const newItems = filterModel.items.filter((f) => f.columnField !== 'name')
+    newItems.push({
       id: 99,
       columnField: 'name',
       operatorValue: 'contains',
       value: searchValue,
     })
-    setFilterModel(currentFilters)
+    setFilterModel({
+      ...filterModel,
+      items: newItems,
+    })
   }
 
   const addFilters = (filter) => {
@@ -231,6 +231,7 @@ function PayloadTestFailures(props) {
               columns: columns,
               clearSearch: () => requestSearch(''),
               doSearch: requestSearch,
+              searchField: 'name',
               addFilters: addFilters,
               filterModel: filterModel,
               setFilterModel: setFilterModel,

sippy-ng/src/releases/ReleasePayloadJobRuns.js

@@ -155,17 +155,19 @@ function ReleasePayloadJobRuns(props) {
   )
 
   const requestSearch = (searchValue) => {
-    const currentFilters = filterModel
-    currentFilters.items = currentFilters.items.filter(
+    const newItems = filterModel.items.filter(
       (f) => f.columnField !== 'release_tag'
     )
-    currentFilters.items.push({
+    newItems.push({
       id: 99,
       columnField: 'releaseTag',
       operatorValue: 'contains',
       value: searchValue,
     })
-    setFilterModel(currentFilters)
+    setFilterModel({
+      ...filterModel,
+      items: newItems,
+    })
   }
 
   const addFilters = (filter) => {
@@ -341,6 +343,7 @@ function ReleasePayloadJobRuns(props) {
             columns: columns,
             clearSearch: () => requestSearch(''),
             doSearch: requestSearch,
+            searchField: 'release_tag',
             addFilters: addFilters,
             filterModel: filterModel,
             setFilterModel: setFilterModel,

sippy-ng/src/releases/ReleasePayloadPullRequests.js

@@ -77,17 +77,19 @@ function ReleasePayloadPullRequests(props) {
   )
 
   const requestSearch = (searchValue) => {
-    const currentFilters = filterModel
-    currentFilters.items = currentFilters.items.filter(
+    const newItems = filterModel.items.filter(
       (f) => f.columnField !== 'release_tag'
     )
-    currentFilters.items.push({
+    newItems.push({
       id: 99,
       columnField: 'release_tag',
       operatorValue: 'contains',
       value: searchValue,
     })
-    setFilterModel(currentFilters)
+    setFilterModel({
+      ...filterModel,
+      items: newItems,
+    })
   }
 
   const addFilters = (filter) => {
@@ -195,6 +197,7 @@ function ReleasePayloadPullRequests(props) {
           columns: columns,
           clearSearch: () => requestSearch(''),
           doSearch: requestSearch,
+          searchField: 'release_tag',
           addFilters: addFilters,
           filterModel: filterModel,
           setFilterModel: setFilterModel,

sippy-ng/src/releases/ReleasePayloadTable.js

@@ -320,17 +320,19 @@ function ReleasePayloadTable(props) {
   }
 
   const requestSearch = (searchValue) => {
-    const currentFilters = filterModel
-    currentFilters.items = currentFilters.items.filter(
+    const newItems = filterModel.items.filter(
       (f) => f.columnField !== 'release_tag'
     )
-    currentFilters.items.push({
+    newItems.push({
       id: 99,
       columnField: 'release_tag',
       operatorValue: 'contains',
       value: searchValue,
     })
-    setFilterModelWithConversion(currentFilters)
+    setFilterModelWithConversion({
+      ...filterModel,
+      items: newItems,
+    })
   }
 
   const addFilters = (filter) => {
@@ -443,6 +445,7 @@ function ReleasePayloadTable(props) {
           columns: columns,
           clearSearch: () => requestSearch(''),
           doSearch: requestSearch,
+          searchField: 'release_tag',
           addFilters: addFilters,
           filterModel: filterModel,
           setFilterModel: setFilterModelWithConversion,

sippy-ng/src/repositories/RepositoriesTable.js

@@ -278,17 +278,17 @@ function RepositoriesTable(props) {
   }
 
   const requestSearch = (searchValue) => {
-    const currentFilters = filterModel
-    currentFilters.items = currentFilters.items.filter(
-      (f) => f.columnField !== 'repo'
-    )
-    currentFilters.items.push({
+    const newItems = filterModel.items.filter((f) => f.columnField !== 'repo')
+    newItems.push({
       id: 99,
       columnField: 'repo',
       operatorValue: 'contains',
       value: searchValue,
     })
-    setFilterModel(currentFilters)
+    setFilterModel({
+      ...filterModel,
+      items: newItems,
+    })
   }
 
   return (
@@ -328,6 +328,7 @@ function RepositoriesTable(props) {
         componentsProps={{
           toolbar: {
             doSearch: requestSearch,
+            searchField: 'repo',
             clearSearch: () => requestSearch(''),
             views: gridView.views,
             view: view,