feat: table filters are submitted when pressing the Enter key

app/components/FilterableTable/FilterableTableFilterRow.tsx

@@ -32,8 +32,14 @@ const FilterableTableFilterRow: React.FunctionComponent<Props> = ({
     onSubmit({});
   };
 
+  const handleKeyDown: React.KeyboardEventHandler = (e) => {
+    if (e.key === 'Enter') {
+      onSubmit(searchFilters);
+    }
+  };
+
   return (
-    <tr>
+    <tr onKeyDown={handleKeyDown}>
       {filters.map((filter) => {
         const column = filter.argName;
         const key = filter.argName + filter.title;

app/tests/unit/components/FilterableComponents/FilterableTableFilterRow.test.tsx → app/tests/unit/components/FilterableTable/FilterableTableFilterRow.test.tsx

@@ -142,4 +142,20 @@ describe('The filterable table headers component', () => {
     expect(rendered.find('option').at(1).text()).toContain('Option1');
     expect(rendered.find('option').at(2).text()).toContain('Option2');
   });
+
+  it('should submit the filters if the "Enter" key is pressed', () => {
+    const handleSubmit = jest.fn();
+    const filters = [createMockFilter('test')];
+    const rendered = shallow(
+      <FilterableTableFilterRow
+        filters={filters}
+        onSubmit={handleSubmit}
+        filterArgs={{}}
+      />
+    );
+
+    rendered.find('tr').first().simulate('keyDown', {key: 'Enter'});
+
+    expect(handleSubmit).toBeCalledTimes(1);
+  });
 });

app/tests/unit/components/FilterableComponents/__snapshots__/FilterableTableFilterRow.test.tsx.snap → app/tests/unit/components/FilterableTable/__snapshots__/FilterableTableFilterRow.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`The filterable table headers component only renders elements that are searchable 1`] = `
 <tr
   className="jsx-870174952"
+  onKeyDown={[Function]}
 >
   <td
     className="jsx-870174952"
@@ -60,6 +61,7 @@ exports[`The filterable table headers component only renders elements that are s
 exports[`The filterable table headers component renders a option input if values are provided 1`] = `
 <tr
   className="jsx-870174952"
+  onKeyDown={[Function]}
 >
   <td
     className="jsx-870174952"
@@ -132,6 +134,7 @@ exports[`The filterable table headers component renders a option input if values
 exports[`The filterable table headers component renders a text input if values are not provided 1`] = `
 <tr
   className="jsx-870174952"
+  onKeyDown={[Function]}
 >
   <td
     className="jsx-870174952"
@@ -181,6 +184,7 @@ exports[`The filterable table headers component renders a text input if values a
 exports[`The filterable table headers component renders as many td elements as search options, plus one for the search buttons 1`] = `
 <tr
   className="jsx-870174952"
+  onKeyDown={[Function]}
 >
   <td
     className="jsx-870174952"
@@ -242,6 +246,7 @@ exports[`The filterable table headers component renders as many td elements as s
 exports[`The filterable table headers component renders search and reset buttons 1`] = `
 <tr
   className="jsx-870174952"
+  onKeyDown={[Function]}
 >
   <td
     className="jsx-870174952 flex"