Add filter actions menu to error table

To make it easier to use the filter interface for config errors,
use the patternfly react-table actions menu feature to put a single
search icon on the right of the table row which pops up a menu
that allows users to add a filter for each filterable column.

This makes it easy to "zoom in" to errors of a particular type o
for a particular project.

The action menu is not compatible with our custom "zuul-table" css,
so that class has been removed here.  The main difference at this point
is that it doesn't have the animated highlight on the left side during
mouseover.

Change-Id: I3ebac23296e61cfafcec3d5b37e65fffa4baad40

web/src/containers/configerrors/ConfigErrorTable.jsx

@@ -24,6 +24,7 @@ import {
   EmptyStateSecondaryActions,
   Spinner,
   Title,
+  DropdownToggle,
 } from '@patternfly/react-core'
 import {
   InfoCircleIcon,
@@ -32,6 +33,7 @@ import {
   CubeIcon,
   StreamIcon,
   FlagIcon,
+  SearchPlusIcon,
 } from '@patternfly/react-icons'
 import {
   Table,
@@ -51,6 +53,7 @@ function ConfigErrorTable({
   fetching,
   onClearFilters,
   preferences,
+  addFilter,
 }) {
 
   const [expandedRows, setExpandedRows] = React.useState([])
@@ -102,15 +105,19 @@ function ConfigErrorTable({
       cells: [
         {
           title: error.source_context.project,
+          filterCategory: 'project'
         },
         {
           title: error.source_context.branch,
+          filterCategory: 'branch'
         },
         {
           title: error.severity,
+          filterCategory: 'severity'
         },
         {
           title: error.name,
+          filterCategory: 'name'
         },
         {
           title: error.short_error,
@@ -167,6 +174,27 @@ function ConfigErrorTable({
     })
   }
 
+  const actionResolver = (rowData) => {
+    if (rowData.parent !== undefined) {
+      return []
+    }
+    const cells = rowData.cells.filter(cell =>
+      cell.filterCategory
+    )
+    return cells.map(cell => {
+      return {
+        title: `Filter by ${cell.filterCategory}: ${cell.title} `,
+        onClick: () => {addFilter(cell.filterCategory, cell.title)}
+      }
+    })
+  }
+
+  const filterToggle = (filterProps) => (
+    <DropdownToggle toggleIndicator={null} onToggle={filterProps.onToggle}>
+      <SearchPlusIcon color='var(--pf-global--Color--200)'/>
+    </DropdownToggle>
+  )
+
   return (
     <>
       <Table
@@ -174,11 +202,11 @@ function ConfigErrorTable({
         variant={TableVariant.compact}
         cells={columns}
         rows={rows}
-        className="zuul-table"
+        actionResolver={actionResolver}
         onCollapse={(_event, rowIndex, isOpen) => {
           setRowExpanded(rowIndex, isOpen)
         }}
-        expandId="expandable-table-toggle" contentId="expandable-table-content"
+        actionsToggle={filterToggle}
       >
         <TableHeader />
         <TableBody />
@@ -210,6 +238,7 @@ ConfigErrorTable.propTypes = {
   fetching: PropTypes.bool.isRequired,
   onClearFilters: PropTypes.func.isRequired,
   preferences: PropTypes.object.isRequired,
+  addFilter: PropTypes.func.isRequired,
 }
 
 export default connect((state) => ({

web/src/pages/ConfigErrors.jsx

@@ -178,6 +178,18 @@ class ConfigErrorsPage extends React.Component {
     return null
   }
 
+  addFilter = (category, value) => {
+    // Used by the table search-add icon
+    const prevFilters = this.state.filters[category]
+    const newFilters = {
+      ...this.state.filters,
+      [category]: prevFilters.includes(value)
+        ? prevFilters
+        : [...prevFilters, value],
+    }
+    this.handleFilterChange(newFilters)
+  }
+
   handleFilterChange = (newFilters) => {
     const { location, history } = this.props
     const { filters, itemCount } = this.state
@@ -275,6 +287,7 @@ class ConfigErrorsPage extends React.Component {
           errors={errors}
           fetching={fetching}
           onClearFilters={this.handleClearFilters}
+          addFilter={this.addFilter}
           history={history}
         />
       </PageSection>