feat: apply filter in data browser by pressing "Enter" key (#2256)

Author: dblythy

src/components/BrowserFilter/BrowserFilter.react.js

@@ -117,6 +117,7 @@ export default class BrowserFilter extends React.Component {
                 schema={this.props.schema}
                 filters={this.state.filters}
                 onChange={filters => this.setState({ filters: filters })}
+                onSearch={this.apply.bind(this)}
                 renderRow={props => (
                   <FilterRow {...props} active={this.props.filters.size > 0} parentContentId={POPOVER_CONTENT_ID} />
                 )}

src/components/BrowserFilter/FilterRow.react.js

@@ -27,13 +27,13 @@ let setFocus = (input) => {
   }
 }
 
-function compareValue(info, value, onChangeCompareTo, active, parentContentId) {
+function compareValue(info, value, onChangeCompareTo, onKeyDown, active, parentContentId) {
   switch (info.type) {
     case null:
       return null;
     case 'Object':
     case 'String':
-      return <input type='text' value={value} onChange={(e) => onChangeCompareTo(e.target.value)} ref={setFocus}/>;
+      return <input type='text' value={value} onChange={(e) => onChangeCompareTo(e.target.value)} onKeyDown={onKeyDown} ref={setFocus}/>;
     case 'Pointer':
       return (
         <input
@@ -61,7 +61,9 @@ function compareValue(info, value, onChangeCompareTo, active, parentContentId) {
               val = parseFloat(e.target.value);
             }
             onChangeCompareTo(val);
-          }} />
+          }}
+          onKeyDown={onKeyDown}
+          />
       );
     case 'Date':
       return (
@@ -70,7 +72,7 @@ function compareValue(info, value, onChangeCompareTo, active, parentContentId) {
           className={styles.date}
           value={Parse._decode('date', value)}
           onChange={(value) => onChangeCompareTo(Parse._encode(value))}
-          ref={setFocus} 
+          ref={setFocus}
           parentContentId={parentContentId} />
       );
   }
@@ -86,6 +88,7 @@ let FilterRow = ({
     onChangeField,
     onChangeConstraint,
     onChangeCompareTo,
+    onKeyDown,
     onDeleteRow,
     active,
     parentContentId,
@@ -102,7 +105,7 @@ let FilterRow = ({
       value={Constraints[currentConstraint].name}
       options={constraints.map((c) => Constraints[c].name)}
       onChange={(c) => onChangeConstraint(constraintLookup[c], compareTo)} />
-    {compareValue(compareInfo, compareTo, onChangeCompareTo, active, parentContentId)}
+    {compareValue(compareInfo, compareTo, onChangeCompareTo, onKeyDown, active, parentContentId)}
     <button type='button' className={styles.remove} onClick={onDeleteRow}><Icon name='minus-solid' width={14} height={14} fill='rgba(0,0,0,0.4)' /></button>
   </div>
 );

src/components/Filter/Filter.react.js

@@ -44,7 +44,7 @@ function deleteRow(filters, index) {
   return filters.delete(index);
 }
 
-let Filter = ({ schema, filters, renderRow, onChange, blacklist, className }) => {
+let Filter = ({ schema, filters, renderRow, onChange, onSearch, blacklist, className }) => {
   const currentApp = React.useContext(CurrentApp);
   blacklist = blacklist || [];
   let available = Filters.availableFilters(schema, filters);
@@ -116,6 +116,11 @@ let Filter = ({ schema, filters, renderRow, onChange, blacklist, className }) =>
           onChangeCompareTo: newCompare => {
             onChange(changeCompareTo(schema, filters, i, compareType, newCompare));
           },
+          onKeyDown: ({key}) => {
+            if (key === 'Enter') {
+              onSearch();
+            }
+          },
           onDeleteRow: () => {
             onChange(deleteRow(filters, i));
           }