Show old sidebar when vector_tile flag is inactive

Restore the old sidebar facilities tab as a
`NonVectorTileFilterSidebarFacilitiesTab` component so that it can be
displayed when the vector_tile flag is off.

Restore some utility functions (moved into the NonVectorTile...
component) which were required to make the component work, along with
some Redux actions it expected to exist.

Adjust the fetchFacilities function to accept an options object so that
callers can set the page request size. We don't need to make a similar
adjustment to the fetchNextPage function since it uses the URL returned
from the API for its next page of results.

src/app/src/actions/facilities.js

@@ -6,6 +6,8 @@ import apiRequest from '../util/apiRequest';
 
 import { fetchCurrentTileCacheKey } from './vectorTileLayer';
 
+import { FACILITIES_REQUEST_PAGE_SIZE } from '../util/constants';
+
 import {
     logErrorAndDispatchFailure,
     makeGetFacilitiesURLWithQueryString,
@@ -24,7 +26,10 @@ export const failFetchSingleFacility = createAction('FAIL_FETCH_SINGLE_FACILITY'
 export const completeFetchSingleFacility = createAction('COMPLETE_FETCH_SINGLE_FACILITY');
 export const resetSingleFacility = createAction('RESET_SINGLE_FACILITY');
 
-export function fetchFacilities(pushNewRoute = noop) {
+export function fetchFacilities({
+    pageSize = FACILITIES_REQUEST_PAGE_SIZE,
+    pushNewRoute = noop,
+}) {
     return (dispatch, getState) => {
         dispatch(fetchCurrentTileCacheKey());
         dispatch(startFetchFacilities());
@@ -36,7 +41,7 @@ export function fetchFacilities(pushNewRoute = noop) {
         const qs = createQueryStringFromSearchFilters(filters);
 
         return apiRequest
-            .get(makeGetFacilitiesURLWithQueryString(qs))
+            .get(makeGetFacilitiesURLWithQueryString(qs, pageSize))
             .then(({ data }) => {
                 const responseHasOnlyOneFacility = get(
                     data,

src/app/src/actions/ui.js

@@ -9,3 +9,8 @@ export const recordSearchTabResetButtonClick =
 
 export const reportWindowResize =
     createAction('REPORT_WINDOW_RESIZE');
+
+export const updateSidebarFacilitiesTabTextFilter =
+    createAction('UPDATE_SIDEBAR_FACILITIES_TAB_TEXT_FILTER');
+export const resetSidebarFacilitiesTabTextFilter =
+    createAction('RESET_SIDEBAR_FACILITIES_TAB_TEXT_FILTER');

src/app/src/components/FilterSidebar.jsx

@@ -9,10 +9,13 @@ import { Route } from 'react-router-dom';
 import FilterSidebarGuideTab from './FilterSidebarGuideTab';
 import FilterSidebarSearchTab from './FilterSidebarSearchTab';
 import FilterSidebarFacilitiesTab from './FilterSidebarFacilitiesTab';
+import NonVectorTileFilterSidebarFacilitiesTab from './NonVectorTileFilterSidebarFacilitiesTab';
+import FeatureFlag from './FeatureFlag';
 
 import {
     filterSidebarTabsEnum,
     filterSidebarTabs,
+    VECTOR_TILE,
 } from '../util/constants';
 
 import {
@@ -136,7 +139,14 @@ class FilterSidebar extends Component {
                     // in its `mapDispatchToProps` function.
                     return <Route component={FilterSidebarSearchTab} />;
                 case filterSidebarTabsEnum.facilities:
-                    return <FilterSidebarFacilitiesTab />;
+                    return (
+                        <FeatureFlag
+                            flag={VECTOR_TILE}
+                            alternative={<NonVectorTileFilterSidebarFacilitiesTab />}
+                        >
+                            <FilterSidebarFacilitiesTab />
+                        </FeatureFlag>
+                    );
                 default:
                     window.console.warn('invalid tab selection', activeFilterSidebarTab);
                     return null;

src/app/src/components/FilterSidebarSearchTab.jsx

@@ -6,6 +6,7 @@ import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import ReactSelect from 'react-select';
+import get from 'lodash/get';
 
 import FacilitySidebarSearchTabFacilitiesCount from './FacilitySidebarSearchTabFacilitiesCount';
 
@@ -35,6 +36,8 @@ import {
     makeSubmitFormOnEnterKeyPressFunction,
 } from '../util/util';
 
+import { FACILITIES_REQUEST_PAGE_SIZE } from '../util/constants';
+
 const filterSidebarSearchTabStyles = Object.freeze({
     formStyle: Object.freeze({
         width: '100%',
@@ -72,6 +75,7 @@ function FilterSidebarSearchTab({
     facilities,
     fetchingOptions,
     submitFormOnEnterKeyPress,
+    vectorTileFlagIsActive,
 }) {
     if (fetchingOptions) {
         return (
@@ -219,7 +223,7 @@ function FilterSidebarSearchTab({
                                         color="primary"
                                         className="margin-left-16 blue-background"
                                         style={{ boxShadow: 'none' }}
-                                        onClick={searchForFacilities}
+                                        onClick={() => searchForFacilities(vectorTileFlagIsActive)}
                                         disabled={fetchingOptions}
                                     >
                                         Search
@@ -255,6 +259,7 @@ FilterSidebarSearchTab.propTypes = {
     searchForFacilities: func.isRequired,
     facilities: facilityCollectionPropType,
     fetchingOptions: bool.isRequired,
+    vectorTileFlagIsActive: bool.isRequired,
 };
 
 function mapStateToProps({
@@ -284,8 +289,12 @@ function mapStateToProps({
             fetching: fetchingFacilities,
         },
     },
+    featureFlags,
 }) {
+    const vectorTileFlagIsActive = get(featureFlags, 'flags.vector_tile', false);
+
     return {
+        vectorTileFlagIsActive,
         contributorOptions,
         contributorTypeOptions,
         countryOptions,
@@ -316,7 +325,10 @@ function mapDispatchToProps(dispatch, {
             dispatch(recordSearchTabResetButtonClick());
             return dispatch(resetAllFilters());
         },
-        searchForFacilities: () => dispatch(fetchFacilities(push)),
+        searchForFacilities: vectorTilesAreActive => dispatch(fetchFacilities({
+            pageSize: vectorTilesAreActive ? FACILITIES_REQUEST_PAGE_SIZE : 500,
+            pushNewRoute: push,
+        })),
         submitFormOnEnterKeyPress: makeSubmitFormOnEnterKeyPressFunction(
             () => dispatch(fetchFacilities(push)),
         ),