Filter objects UI

package.json

@@ -84,6 +84,7 @@
     "promise": "8.0.2",
     "raf": "3.4.0",
     "react-dev-utils": "6.0.0-next.3e165448",
+    "react-testing-library": "5.1.0",
     "resolve": "1.8.1",
     "style-loader": "0.23.1",
     "stylelint": "9.6.0",
@@ -95,7 +96,8 @@
     "webpack": "4.20.2",
     "webpack-dev-server": "3.1.9",
     "webpack-manifest-plugin": "2.0.4",
-    "webpack-merge": "4.1.4"
+    "webpack-merge": "4.1.4",
+    "whatwg-fetch": "3.0.0"
   },
   "jest": {
     "collectCoverageFrom": [

src/components/data/QueryRecipeFilters.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { fetchRecipeFilters } from 'console/state/recipes/actions';
+
+@connect(
+  null,
+  {
+    fetchRecipeFilters,
+  },
+)
+class QueryRecipeFilters extends React.PureComponent {
+  static propTypes = {
+    fetchRecipeFilters: PropTypes.func.isRequired,
+  };
+
+  componentDidMount() {
+    this.props.fetchRecipeFilters();
+  }
+
+  render() {
+    return null;
+  }
+}
+
+export default QueryRecipeFilters;

src/less/pages/recipe-details.less

@@ -32,6 +32,11 @@ dl.details {
     }
   }
 
+  dt.no-padding,
+  dd.no-padding {
+    padding: 0;
+  }
+
   .arguments-value {
     .value {
       float: left;

src/setupTests.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { configure, mount, shallow } from 'enzyme';
+import { cleanup } from 'react-testing-library';
 import Adapter from 'enzyme-adapter-react-16';
 import * as immutableMatchers from 'jest-immutable-matchers';
 import fetchMock from 'fetch-mock';
+import { Headers } from 'whatwg-fetch';
 
 // Configure Enzyme adapter
 configure({ adapter: new Adapter() });
@@ -40,10 +42,12 @@ global.auth0 = {
   })),
 };
 global.localStorage = mockLocalStorage();
+global.sessionStorage = mockLocalStorage();
 global.mount = mount;
 global.shallow = shallow;
 global.React = React;
 global.ReactDOM = ReactDOM;
+global.Headers = Headers;
 
 // Set up a global fetch mock, and assert that all calls to it are expected.
 beforeEach(() => {
@@ -60,4 +64,7 @@ afterEach(() => {
   } finally {
     fetchMock.restore();
   }
+
+  // Unmounts React trees that were mounted with react-testing-library's render.
+  cleanup();
 });

src/state/recipes/actions.js

@@ -145,13 +145,30 @@ export function fetchRecipeHistory(pk) {
 
 export function fetchRecipeFilters() {
   return async dispatch => {
+    const localStorageKey = 'recipe_filters';
+    const localFilters = window.localStorage.getItem(localStorageKey);
+    if (localFilters) {
+      // If the filters *were* in localStorage, it's a JSON *string*.
+      dispatch({
+        type: RECIPE_FILTERS_RECEIVE,
+        filters: JSON.parse(localFilters),
+      });
+    }
+    // XXX If we already had the filters in localStorage, can we avoid using this
+    // makeNormandyApiRequest() with an ID so that it doesn't cause any spinners to appear
+    // when the localStorage version almost definitely is good enough.
     const requestId = 'fetch-recipe-filters';
-    const filters = await dispatch(makeNormandyApiRequest(requestId, 'v2/filters/'));
-
-    dispatch({
-      type: RECIPE_FILTERS_RECEIVE,
-      filters,
-    });
+    const filters = await dispatch(makeNormandyApiRequest(requestId, 'v3/filters/'));
+    // After it has been retrieved remotely, it's very possible that the lists
+    // haven't changed. If it hasn't changed compared to what we had in local Storage, then
+    // don't bother dispatching again.
+    if (!localFilters || JSON.stringify(filters) !== localFilters) {
+      dispatch({
+        type: RECIPE_FILTERS_RECEIVE,
+        filters,
+      });
+      window.localStorage.setItem(localStorageKey, JSON.stringify(filters));
+    }
   };
 }
 

src/tests/components/data/QueryRecipeFilters.test.js

@@ -0,0 +1,16 @@
+import { render } from 'react-testing-library';
+import TestComponent from 'console/components/data/QueryRecipeFilters';
+
+const { WrappedComponent: QueryRecipeFilters } = TestComponent;
+
+describe('<QueryRecipeFilters>', () => {
+  it('should work', () => {
+    const props = {
+      fetchRecipeFilters: jest.fn(),
+    };
+    const { container } = render(<QueryRecipeFilters {...props} />);
+    expect(props.fetchRecipeFilters).toHaveBeenCalledTimes(1);
+    // Should render nothing.
+    expect(container.querySelectorAll('*').length).toEqual(0);
+  });
+});

src/tests/state/actions/actions.test.js

@@ -0,0 +1,44 @@
+import { fetchRecipeFilters } from 'console/state/recipes/actions';
+
+describe('Actions', () => {
+  describe('fetchRecipeFilters action', () => {
+    it('should work (and update) on an empty localStorage', async () => {
+      const fakeFilters = { countries: [] };
+      let state = {};
+      let dispatches = 0;
+      const dispatcher = action => {
+        if (typeof action === 'function') {
+          // Let's pretend we call out to the network.
+          return fakeFilters;
+        }
+        dispatches++;
+        state = action;
+      };
+      const func = fetchRecipeFilters();
+      await func(dispatcher);
+      expect(state.filters).toEqual(fakeFilters);
+      expect(dispatches).toEqual(1);
+      expect(JSON.parse(global.localStorage.getItem('recipe_filters'))).toEqual(fakeFilters);
+    });
+
+    it('should update existing localStorage', async () => {
+      global.localStorage.setItem('recipe_filters', JSON.stringify({ countries: [] }));
+      const fakeFilters = { countries: [{ key: 'SE', value: 'Sweeeden' }] };
+      let state = {};
+      let dispatches = 0;
+      const dispatcher = action => {
+        if (typeof action === 'function') {
+          // Let's pretend we call out to the network.
+          return fakeFilters;
+        }
+        dispatches++;
+        state = action;
+      };
+      const func = fetchRecipeFilters();
+      await func(dispatcher);
+      expect(state.filters).toEqual(fakeFilters);
+      expect(dispatches).toEqual(2);
+      expect(JSON.parse(global.localStorage.getItem('recipe_filters'))).toEqual(fakeFilters);
+    });
+  });
+});