Merge mozilla#666

666: Filter widget in table header is confusing r=mythmon a=peterbe

Fixes mozilla#653 

I know I could have done this as a one-liner in the prop itself instead of this 6-lines code thing. But this code is fluent to read and a good place to put a code comment. 

Co-authored-by: Peter Bengtsson <mail@peterbe.com>

src/workflows/recipes/pages/RecipeListingPage.js

@@ -134,14 +134,20 @@ class RecipeListingPage extends React.PureComponent {
       },
 
       action: ({ action, ordering }) => {
+        // If 'action' is null, don't set the filteredValue prop to: [null]
+        // or else it will always appear highlit.
+        const filteredValue = [];
+        if (action) {
+          filteredValue.push(action);
+        }
         return (
           <Table.Column
             title="Action"
             dataIndex="action"
             key="action"
             render={RecipeListingPage.renderLinkedText}
             filters={actionNames.map(name => ({ text: name, value: name }))}
-            filteredValue={[action]}
+            filteredValue={filteredValue}
             filterMultiple={false}
             sortOrder={DataList.getSortOrder('action', ordering)}
             sorter
@@ -150,6 +156,12 @@ class RecipeListingPage extends React.PureComponent {
       },
 
       enabled: ({ status }) => {
+        // If 'status' is null, don't set the filteredValue prop to: [null]
+        // or else it will always appear highlit.
+        const filteredValue = [];
+        if (status) {
+          filteredValue.push(status);
+        }
         return (
           <Table.Column
             title="Enabled"
@@ -159,7 +171,7 @@ class RecipeListingPage extends React.PureComponent {
               { text: 'Enabled', value: 'enabled' },
               { text: 'Disabled', value: 'disabled' },
             ]}
-            filteredValue={[status]}
+            filteredValue={filteredValue}
             filterMultiple={false}
           />
         );