From 12ed908d0ff610ec5e13a6ba70a3abfb6db6ac1b Mon Sep 17 00:00:00 2001
From: Kelly Innes <kinnes@azavea.com>
Date: Mon, 4 Mar 2019 10:15:08 -0500
Subject: [PATCH] Create & implement facilities tab

- create facilities tab for displaying a text list of facilities
- add free text search field to search on name, and country name fields
- add functionality to download a CSV of facilities filtered by free
text search
- update Redux actions to handle toggling & displaying the facilities
tab and storing the free text search value
- adjust application HTML element hierarchy & style sheet in order to
   - prevent the enter app from scrolling vertically
   - enable select components to scroll vertically when necessary
---
 src/app/src/App.jsx                           |  21 +-
 .../__tests__/utils.facilitiesCSV.tests.js    |  79 +++++
 src/app/src/actions/ui.js                     |   6 +
 src/app/src/components/AppGrid.jsx            |   1 -
 src/app/src/components/AppOverflow.jsx        |  16 +
 src/app/src/components/Contribute.jsx         |  51 +--
 .../src/components/ControlledTextInput.jsx    |   4 +
 src/app/src/components/FacilityListItems.jsx  | 101 +++---
 src/app/src/components/FacilityLists.jsx      |  27 +-
 src/app/src/components/FilterSidebar.jsx      |  55 ++-
 .../components/FilterSidebarFacilitiesTab.jsx | 328 ++++++++++++++++++
 .../src/components/FilterSidebarGuideTab.jsx  |   7 +-
 .../src/components/FilterSidebarSearchTab.jsx |   7 +-
 src/app/src/components/Footer.jsx             |   4 +-
 src/app/src/components/LoginForm.jsx          | 129 +++----
 src/app/src/components/MapAndSidebar.jsx      |   6 +-
 src/app/src/components/OARMap.jsx             |   2 +-
 src/app/src/components/RegisterForm.jsx       |  83 ++---
 src/app/src/components/UserProfile.jsx        |  45 +--
 src/app/src/reducers/FacilitiesReducer.js     |   1 +
 src/app/src/reducers/UIReducer.js             |  42 +++
 src/app/src/styles/css/Map.css                |   6 +-
 src/app/src/util/constants.js                 |   5 +
 src/app/src/util/propTypes.js                 |   1 +
 src/app/src/util/styles.js                    |   7 +
 src/app/src/util/util.facilitiesCSV.js        |  45 +++
 src/django/api/serializers.py                 |   6 +-
 27 files changed, 844 insertions(+), 241 deletions(-)
 create mode 100644 src/app/src/__tests__/utils.facilitiesCSV.tests.js
 create mode 100644 src/app/src/components/AppOverflow.jsx
 create mode 100644 src/app/src/components/FilterSidebarFacilitiesTab.jsx
 create mode 100644 src/app/src/util/util.facilitiesCSV.js

diff --git a/src/app/src/App.jsx b/src/app/src/App.jsx
index 1f1eb5baa..92861e192 100644
--- a/src/app/src/App.jsx
+++ b/src/app/src/App.jsx
@@ -35,11 +35,18 @@ import {
     profileRoute,
 } from './util/constants';
 
-const styles = {
-    root: {
+const appStyles = Object.freeze({
+    root: Object.freeze({
         flexGrow: 1,
-    },
-};
+    }),
+    mainPanelStyle: Object.freeze({
+        top: '64px',
+        right: '0',
+        left: '0',
+        position: 'fixed',
+        bottom: '47px',
+    }),
+});
 
 class App extends Component {
     componentDidMount() {
@@ -52,7 +59,7 @@ class App extends Component {
                 <Router history={history}>
                     <div className="App">
                         <Navbar />
-                        <div>
+                        <main style={appStyles.mainPanelStyle}>
                             <Switch>
                                 <Route
                                     exact
@@ -92,7 +99,7 @@ class App extends Component {
                                     component={FacilityLists}
                                 />
                             </Switch>
-                        </div>
+                        </main>
                         <Footer />
                         <ToastContainer
                             position="bottom-center"
@@ -115,4 +122,4 @@ function mapDispatchToProps(dispatch) {
     };
 }
 
-export default connect(() => ({}), mapDispatchToProps)(withStyles(styles)(App));
+export default connect(() => ({}), mapDispatchToProps)(withStyles(appStyles)(App));
diff --git a/src/app/src/__tests__/utils.facilitiesCSV.tests.js b/src/app/src/__tests__/utils.facilitiesCSV.tests.js
new file mode 100644
index 000000000..1603443a4
--- /dev/null
+++ b/src/app/src/__tests__/utils.facilitiesCSV.tests.js
@@ -0,0 +1,79 @@
+/* eslint-env jest */
+import isEqual from 'lodash/isEqual';
+
+import {
+    csvHeaders,
+    createFacilityRowFromFeature,
+    formatDataForCSV,
+} from '../util/util.facilitiesCSV';
+
+it('creates a new facility row array from a feature', () => {
+    const feature = {
+        properties: {
+            name: 'name',
+            address: 'address',
+            country_code: 'country_code',
+            country_name: 'country_name',
+            oar_id: 'oar_id',
+        },
+        geometry: {
+            coordinates: [
+                'lng',
+                'lat',
+            ],
+        },
+    };
+
+    const expectedRowArray = [
+        'oar_id',
+        'name',
+        'address',
+        'country_code',
+        'country_name',
+        'lat',
+        'lng',
+    ];
+
+    expect(isEqual(
+        createFacilityRowFromFeature(feature),
+        expectedRowArray,
+    )).toBe(true);
+});
+
+it('creates a 2-d array including headers for exporting as a CSV', () => {
+    const facilities = [
+        {
+            properties: {
+                name: 'name',
+                address: 'address',
+                country_code: 'country_code',
+                country_name: 'country_name',
+                oar_id: 'oar_id',
+            },
+            geometry: {
+                coordinates: [
+                    'lng',
+                    'lat',
+                ],
+            },
+        },
+    ];
+
+    const expected2DArray = [
+        csvHeaders,
+        [
+            'oar_id',
+            'name',
+            'address',
+            'country_code',
+            'country_name',
+            'lat',
+            'lng',
+        ],
+    ];
+
+    expect(isEqual(
+        formatDataForCSV(facilities),
+        expected2DArray,
+    )).toBe(true);
+});
diff --git a/src/app/src/actions/ui.js b/src/app/src/actions/ui.js
index 260dac742..bdb67aa02 100644
--- a/src/app/src/actions/ui.js
+++ b/src/app/src/actions/ui.js
@@ -2,3 +2,9 @@ import { createAction } from 'redux-act';
 
 export const makeSidebarGuideTabActive = createAction('MAKE_SIDEBAR_GUIDE_TAB_ACTIVE');
 export const makeSidebarSearchTabActive = createAction('MAKE_SIDEBAR_SEARCH_TAB_ACTIVE');
+export const makeSidebarFacilitiesTabActive = createAction('MAKE_SIDEBAR_FACILITIES_TAB_ACTIVE');
+
+export const updateSidebarFacilitiesTabSearch =
+    createAction('UPDATE_SIDEBAR_FACILITIES_TAB_TEXT_SEARCH');
+export const resetSidebarFacilitiesTabSearch =
+    createAction('RESET_SIDEBAR_FACILITIES_TAB_TEXT_SEARCH');
diff --git a/src/app/src/components/AppGrid.jsx b/src/app/src/components/AppGrid.jsx
index f119b4cac..aaea521f9 100644
--- a/src/app/src/components/AppGrid.jsx
+++ b/src/app/src/components/AppGrid.jsx
@@ -16,7 +16,6 @@ export default function AppGrid({
                 style={{
                     marginLeft: 'auto',
                     marginRight: 'auto',
-                    marginTop: '64px',
                 }}
             >
                 <Grid container style={style}>
diff --git a/src/app/src/components/AppOverflow.jsx b/src/app/src/components/AppOverflow.jsx
new file mode 100644
index 000000000..8fd926d94
--- /dev/null
+++ b/src/app/src/components/AppOverflow.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { node } from 'prop-types';
+
+export default function AppOverflow({
+    children,
+}) {
+    return (
+        <div style={{ height: '100%', overflow: 'auto' }}>
+            {children}
+        </div>
+    );
+}
+
+AppOverflow.propTypes = {
+    children: node.isRequired,
+};
diff --git a/src/app/src/components/Contribute.jsx b/src/app/src/components/Contribute.jsx
index 17c249e69..9501cfbb8 100644
--- a/src/app/src/components/Contribute.jsx
+++ b/src/app/src/components/Contribute.jsx
@@ -6,6 +6,7 @@ import Grid from '@material-ui/core/Grid';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 import AppGrid from './AppGrid';
+import AppOverflow from './AppOverflow';
 import ContributeHeader from './ContributeHeader';
 import ContributeForm from './ContributeForm';
 import ContributeTroubleshooting from './ContributeTroubleshooting';
@@ -49,31 +50,33 @@ function ContributeList({
     }
 
     return (
-        <AppGrid title="Contribute">
-            <Grid container className="margin-bottom-64">
-                <Grid item xs={12}>
-                    <ContributeHeader />
-                    <ContributeForm />
-                    <div className="form__field">
-                        <p className="form__label">
-                            Once the list has been successfully
-                            uploaded, view your list and confirm or deny
-                            matches.
-                        </p>
-                    </div>
-                    <div className="form__field">
-                        <Link
-                            to={listsRoute}
-                            href={listsRoute}
-                            className="outlined-button outlined-button--link margin-top-16"
-                        >
-                            View My Lists
-                        </Link>
-                    </div>
+        <AppOverflow>
+            <AppGrid title="Contribute">
+                <Grid container className="margin-bottom-64">
+                    <Grid item xs={12}>
+                        <ContributeHeader />
+                        <ContributeForm />
+                        <div className="form__field">
+                            <p className="form__label">
+                                Once the list has been successfully
+                                uploaded, view your list and confirm or deny
+                                matches.
+                            </p>
+                        </div>
+                        <div className="form__field">
+                            <Link
+                                to={listsRoute}
+                                href={listsRoute}
+                                className="outlined-button outlined-button--link margin-top-16"
+                            >
+                                View My Lists
+                            </Link>
+                        </div>
+                    </Grid>
+                    <ContributeTroubleshooting />
                 </Grid>
-                <ContributeTroubleshooting />
-            </Grid>
-        </AppGrid>
+            </AppGrid>
+        </AppOverflow>
     );
 }
 
diff --git a/src/app/src/components/ControlledTextInput.jsx b/src/app/src/components/ControlledTextInput.jsx
index 384529972..118b2109c 100644
--- a/src/app/src/components/ControlledTextInput.jsx
+++ b/src/app/src/components/ControlledTextInput.jsx
@@ -9,6 +9,7 @@ export default function ControlledTextInput({
     hint,
     value,
     onChange,
+    placeholder,
 }) {
     return (
         <Fragment>
@@ -21,6 +22,7 @@ export default function ControlledTextInput({
                 className="noFocus form__text-input"
                 value={value}
                 onChange={onChange}
+                placeholder={placeholder}
             />
         </Fragment>
     );
@@ -29,6 +31,7 @@ export default function ControlledTextInput({
 ControlledTextInput.defaultProps = {
     type: 'text',
     hint: '',
+    placeholder: '',
 };
 
 ControlledTextInput.propTypes = {
@@ -37,4 +40,5 @@ ControlledTextInput.propTypes = {
     type: string,
     hint: string,
     onChange: func.isRequired,
+    placeholder: string,
 };
diff --git a/src/app/src/components/FacilityListItems.jsx b/src/app/src/components/FacilityListItems.jsx
index dfe0a2f7e..637c7e6ad 100644
--- a/src/app/src/components/FacilityListItems.jsx
+++ b/src/app/src/components/FacilityListItems.jsx
@@ -8,6 +8,7 @@ import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 
 import AppGrid from './AppGrid';
+import AppOverflow from './AppOverflow';
 import FacilityListItemsEmpty from './FacilityListItemsEmpty';
 import FacilityListItemsTable from './FacilityListItemsTable';
 
@@ -101,59 +102,61 @@ class FacilityListItems extends Component {
         }
 
         return (
-            <Grid
-                container
-                justify="center"
-            >
+            <AppOverflow>
                 <Grid
-                    item
-                    style={facilityListItemsStyles.tableStyles}
+                    container
+                    justify="center"
                 >
-                    <div style={facilityListItemsStyles.headerStyles}>
-                        <div>
-                            <h2 style={facilityListItemsStyles.titleStyles}>
-                                {data.name || data.id}
-                            </h2>
-                            <Typography
-                                variant="subheading"
-                                style={facilityListItemsStyles.descriptionStyles}
-                            >
-                                {data.description || ''}
-                            </Typography>
+                    <Grid
+                        item
+                        style={facilityListItemsStyles.tableStyles}
+                    >
+                        <div style={facilityListItemsStyles.headerStyles}>
+                            <div>
+                                <h2 style={facilityListItemsStyles.titleStyles}>
+                                    {data.name || data.id}
+                                </h2>
+                                <Typography
+                                    variant="subheading"
+                                    style={facilityListItemsStyles.descriptionStyles}
+                                >
+                                    {data.description || ''}
+                                </Typography>
+                            </div>
+                            <div>
+                                <Button
+                                    variant="outlined"
+                                    color="primary"
+                                    style={facilityListItemsStyles.buttonStyles}
+                                    onClick={() => downloadListItemCSV(data)}
+                                >
+                                    Download CSV
+                                </Button>
+                                <Button
+                                    variant="outlined"
+                                    component={Link}
+                                    to={listsRoute}
+                                    href={listsRoute}
+                                    style={facilityListItemsStyles.buttonStyles}
+                                >
+                                    Back to lists
+                                </Button>
+                            </div>
                         </div>
-                        <div>
-                            <Button
-                                variant="outlined"
-                                color="primary"
-                                style={facilityListItemsStyles.buttonStyles}
-                                onClick={() => downloadListItemCSV(data)}
-                            >
-                                Download CSV
-                            </Button>
-                            <Button
-                                variant="outlined"
-                                component={Link}
-                                to={listsRoute}
-                                href={listsRoute}
-                                style={facilityListItemsStyles.buttonStyles}
-                            >
-                                Back to lists
-                            </Button>
-                        </div>
-                    </div>
-                    {
-                        data.items.length
-                            ? (
-                                <Switch>
-                                    <Route
-                                        path={facilityListItemsRoute}
-                                        component={FacilityListItemsTable}
-                                    />
-                                </Switch>)
-                            : <FacilityListItemsEmpty />
-                    }
+                        {
+                            data.items.length
+                                ? (
+                                    <Switch>
+                                        <Route
+                                            path={facilityListItemsRoute}
+                                            component={FacilityListItemsTable}
+                                        />
+                                    </Switch>)
+                                : <FacilityListItemsEmpty />
+                        }
+                    </Grid>
                 </Grid>
-            </Grid>
+            </AppOverflow>
         );
     }
 }
diff --git a/src/app/src/components/FacilityLists.jsx b/src/app/src/components/FacilityLists.jsx
index ea8c4e8e0..2b9ab7f0f 100644
--- a/src/app/src/components/FacilityLists.jsx
+++ b/src/app/src/components/FacilityLists.jsx
@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 import AppGrid from './AppGrid';
+import AppOverflow from './AppOverflow';
 import FacilityListsEmpty from './FacilityListsEmpty';
 import FacilityListsTable from './FacilityListsTable';
 import ShowOnly from './ShowOnly';
@@ -86,18 +87,20 @@ class FacilityLists extends Component {
             : <FacilityListsEmpty />;
 
         return (
-            <AppGrid title="My Lists">
-                <ShowOnly when={!!myFacilitiesRoute}>
-                    <Link
-                        to={myFacilitiesRoute}
-                        href={myFacilitiesRoute}
-                        style={{ paddingBottom: '20px' }}
-                    >
-                        View my facilities
-                    </Link>
-                </ShowOnly>
-                {tableComponent}
-            </AppGrid>
+            <AppOverflow>
+                <AppGrid title="My Lists">
+                    <ShowOnly when={!!myFacilitiesRoute}>
+                        <Link
+                            to={myFacilitiesRoute}
+                            href={myFacilitiesRoute}
+                            style={{ paddingBottom: '20px' }}
+                        >
+                            View my facilities
+                        </Link>
+                    </ShowOnly>
+                    {tableComponent}
+                </AppGrid>
+            </AppOverflow>
         );
     }
 }
diff --git a/src/app/src/components/FilterSidebar.jsx b/src/app/src/components/FilterSidebar.jsx
index 998047a2c..92357dddc 100644
--- a/src/app/src/components/FilterSidebar.jsx
+++ b/src/app/src/components/FilterSidebar.jsx
@@ -4,10 +4,10 @@ import { connect } from 'react-redux';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
-import Typography from '@material-ui/core/Typography';
 
 import FilterSidebarGuideTab from './FilterSidebarGuideTab';
 import FilterSidebarSearchTab from './FilterSidebarSearchTab';
+import FilterSidebarFacilitiesTab from './FilterSidebarFacilitiesTab';
 
 import {
     filterSidebarTabsEnum,
@@ -17,6 +17,7 @@ import {
 import {
     makeSidebarGuideTabActive,
     makeSidebarSearchTabActive,
+    makeSidebarFacilitiesTabActive,
 } from '../actions/ui';
 
 import {
@@ -34,6 +35,13 @@ import {
 
 import { allListsAreEmpty } from '../util/util';
 
+const filterSidebarStyles = Object.freeze({
+    controlPanelStyles: Object.freeze({
+        height: 'inherit',
+        width: 'inherit',
+    }),
+});
+
 class FilterSidebar extends Component {
     componentDidMount() {
         const {
@@ -70,6 +78,7 @@ class FilterSidebar extends Component {
             activeFilterSidebarTab,
             makeGuideTabActive,
             makeSearchTabActive,
+            makeFacilitiesTabActive,
         } = this.props;
 
         const header = (
@@ -85,9 +94,19 @@ class FilterSidebar extends Component {
         const activeTabIndex = filterSidebarTabs
             .findIndex(({ tab }) => tab === activeFilterSidebarTab);
 
-        const handleTabChange = activeFilterSidebarTab === filterSidebarTabsEnum.guide
-            ? makeSearchTabActive
-            : makeGuideTabActive;
+        const handleTabChange = ({ target: { id } }) => {
+            switch (id) {
+                case filterSidebarTabsEnum.guide:
+                    return makeGuideTabActive();
+                case filterSidebarTabsEnum.search:
+                    return makeSearchTabActive();
+                case filterSidebarTabsEnum.facilities:
+                    return makeFacilitiesTabActive();
+                default:
+                    window.console.log('invalid tab clicked', id);
+                    return null;
+            }
+        };
 
         const tabBar = (
             <AppBar position="static">
@@ -103,6 +122,7 @@ class FilterSidebar extends Component {
                         filterSidebarTabs
                             .map(sidebarTab => (
                                 <Tab
+                                    id={sidebarTab.tab}
                                     key={sidebarTab.tab}
                                     label={sidebarTab.tab}
                                     className="tab-minwidth"
@@ -111,17 +131,28 @@ class FilterSidebar extends Component {
                 </Tabs>
             </AppBar>);
 
-        const insetComponent = activeFilterSidebarTab === filterSidebarTabsEnum.guide
-            ? <FilterSidebarGuideTab />
-            : <FilterSidebarSearchTab />;
+        const insetComponent = (() => {
+            switch (activeFilterSidebarTab) {
+                case filterSidebarTabsEnum.guide:
+                    return <FilterSidebarGuideTab />;
+                case filterSidebarTabsEnum.search:
+                    return <FilterSidebarSearchTab />;
+                case filterSidebarTabsEnum.facilities:
+                    return <FilterSidebarFacilitiesTab />;
+                default:
+                    window.console.warn('invalid tab selection', activeFilterSidebarTab);
+                    return null;
+            }
+        })();
 
         return (
-            <div className="control-panel">
+            <div
+                className="control-panel"
+                style={filterSidebarStyles.controlPanelStyles}
+            >
                 {header}
                 {tabBar}
-                <Typography component="div">
-                    {insetComponent}
-                </Typography>
+                {insetComponent}
             </div>
         );
     }
@@ -131,6 +162,7 @@ FilterSidebar.propTypes = {
     activeFilterSidebarTab: oneOf(Object.values(filterSidebarTabsEnum)).isRequired,
     makeGuideTabActive: func.isRequired,
     makeSearchTabActive: func.isRequired,
+    makeFacilitiesTabActive: func.isRequired,
     fetchFilterOptions: func.isRequired,
     fetchContributors: func.isRequired,
     fetchContributorTypes: func.isRequired,
@@ -168,6 +200,7 @@ function mapDispatchToProps(dispatch) {
     return {
         makeGuideTabActive: () => dispatch(makeSidebarGuideTabActive()),
         makeSearchTabActive: () => dispatch(makeSidebarSearchTabActive()),
+        makeFacilitiesTabActive: () => dispatch(makeSidebarFacilitiesTabActive()),
         fetchFilterOptions: () => dispatch(fetchAllFilterOptions()),
         fetchContributors: () => dispatch(fetchContributorOptions()),
         fetchContributorTypes: () => dispatch(fetchContributorTypeOptions()),
diff --git a/src/app/src/components/FilterSidebarFacilitiesTab.jsx b/src/app/src/components/FilterSidebarFacilitiesTab.jsx
new file mode 100644
index 000000000..d0eb3e33e
--- /dev/null
+++ b/src/app/src/components/FilterSidebarFacilitiesTab.jsx
@@ -0,0 +1,328 @@
+import React, { Fragment } from 'react';
+import { arrayOf, bool, func, string } from 'prop-types';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Divider from '@material-ui/core/Divider';
+import get from 'lodash/get';
+import inRange from 'lodash/inRange';
+
+import ControlledTextInput from './ControlledTextInput';
+
+import {
+    makeSidebarSearchTabActive,
+    updateSidebarFacilitiesTabSearch,
+} from '../actions/ui';
+
+import { facilityCollectionPropType } from '../util/propTypes';
+
+import {
+    makeFacilityDetailLink,
+    downloadFacilitiesCSV,
+    getValueFromEvent,
+    caseInsensitiveIncludes,
+    sortFacilitiesAlphabeticallyByName,
+} from '../util/util';
+
+import COLOURS from '../util/COLOURS';
+
+import { filterSidebarStyles } from '../util/styles';
+
+const SEARCH_TERM_INPUT = 'SEARCH_TERM_INPUT';
+
+const makeFacilityListHeightPercentageString = () => {
+    try {
+        const {
+            documentElement: {
+                clientHeight,
+            },
+        } = document;
+
+        if (clientHeight < 800) {
+            return '50%';
+        }
+
+        if (inRange(clientHeight, 800, 1000)) {
+            return '55%';
+        }
+
+        if (inRange(clientHeight, 1000, 1100)) {
+            return '65%';
+        }
+
+        if (clientHeight > 1100) {
+            return '75%';
+        }
+
+        return '50%';
+    } catch (_) {
+        return '50%';
+    }
+};
+
+const facilitiesTabStyles = Object.freeze({
+    noResultsTextStyles: Object.freeze({
+        margin: '30px',
+    }),
+    linkStyles: Object.freeze({
+        display: 'flex',
+        textDecoration: 'none',
+    }),
+    listItemStyles: Object.freeze({
+        wordWrap: 'anywhere',
+    }),
+    listHeaderStyles: Object.freeze({
+        backgroundColor: COLOURS.WHITE,
+        padding: '0.25rem',
+    }),
+    listStyles: Object.freeze({
+        // set list height programmatically for different viewports
+        height: makeFacilityListHeightPercentageString(),
+        overflowY: 'scroll',
+    }),
+    listBottomPaddingStyles: Object.freeze({
+        height: '200px',
+    }),
+    titleRowStyles: Object.freeze({
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '1rem',
+    }),
+    listHeaderTextSearchStyles: Object.freeze({
+        padding: '1rem',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    }),
+});
+
+function FilterSidebarFacilitiesTab({
+    fetching,
+    data,
+    error,
+    returnToSearchTab,
+    searchTerm,
+    updateSearchTerm,
+}) {
+    if (fetching) {
+        return (
+            <div
+                className="control-panel__content"
+                style={filterSidebarStyles.controlPanelContentStyles}
+            >
+                <div className="control-panel__body">
+                    <CircularProgress />
+                </div>
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div
+                className="control-panel__content"
+                style={filterSidebarStyles.controlPanelContentStyles}
+            >
+                <div className="control-panel__body">
+                    <Typography
+                        variant="body1"
+                        style={facilitiesTabStyles.noResultsTextStyles}
+                        align="center"
+                    >
+                        An error prevented fetching facilities
+                    </Typography>
+                    <Typography
+                        variant="body1"
+                        style={facilitiesTabStyles.noResultsTextStyles}
+                        align="center"
+                    >
+                        <Button
+                            onClick={returnToSearchTab}
+                            variant="outlined"
+                            color="secondary"
+                        >
+                            Try another search
+                        </Button>
+                    </Typography>
+                </div>
+            </div>
+        );
+    }
+
+    const facilities = get(data, 'features', []);
+
+    if (!facilities.length) {
+        return (
+            <div
+                className="control-panel__content"
+                style={filterSidebarStyles.controlPanelContentStyles}
+            >
+                <div className="control-panel__body">
+                    <Typography
+                        variant="body1"
+                        style={facilitiesTabStyles.noResultsTextStyles}
+                        align="center"
+                    >
+                        No facilities were found for that search
+                    </Typography>
+                    <Typography
+                        variant="body1"
+                        style={facilitiesTabStyles.noResultsTextStyles}
+                        align="center"
+                    >
+                        <Button
+                            onClick={returnToSearchTab}
+                            variant="outlined"
+                            color="secondary"
+                        >
+                            Try another search
+                        </Button>
+                    </Typography>
+                </div>
+            </div>
+        );
+    }
+
+    const filteredFacilities = searchTerm
+        ? facilities
+            .filter(({
+                properties: {
+                    address,
+                    name,
+                    country_name: countryName,
+                },
+            }) => caseInsensitiveIncludes(address, searchTerm)
+                || caseInsensitiveIncludes(name, searchTerm)
+                || caseInsensitiveIncludes(countryName, searchTerm))
+        : facilities;
+
+    const orderedFacilities =
+        sortFacilitiesAlphabeticallyByName(filteredFacilities);
+
+    const listHeaderInsetComponent = (
+        <div style={facilitiesTabStyles.listHeaderStyles}>
+            <Typography
+                variant="title"
+                align="center"
+            >
+                <div
+                    style={facilitiesTabStyles.titleRowStyles}
+                >
+                    {`Displaying ${filteredFacilities.length} facilities`}
+                    <Button
+                        variant="outlined"
+                        color="primary"
+                        styles={facilitiesTabStyles.listHeaderButtonStyles}
+                        onClick={() => downloadFacilitiesCSV(orderedFacilities)}
+                    >
+                        Download CSV
+                    </Button>
+                </div>
+            </Typography>
+            <div style={facilitiesTabStyles.listHeaderTextSearchStyles}>
+                <label
+                    htmlFor={SEARCH_TERM_INPUT}
+                >
+                    Search results
+                </label>
+                <ControlledTextInput
+                    id={SEARCH_TERM_INPUT}
+                    value={searchTerm}
+                    onChange={updateSearchTerm}
+                    placeholder="Search name, address, or country"
+                />
+            </div>
+        </div>
+    );
+
+    return (
+        <Fragment>
+            {listHeaderInsetComponent}
+            <div style={filterSidebarStyles.controlPanelContentStyles}>
+                <List style={facilitiesTabStyles.listStyles}>
+                    {
+                        orderedFacilities
+                            .map(({
+                                properties: {
+                                    address,
+                                    name,
+                                    country_name: countryName,
+                                    oar_id: oarID,
+                                },
+                            }) => (
+                                <Fragment key={oarID}>
+                                    <Divider />
+                                    <ListItem
+                                        key={oarID}
+                                        style={facilitiesTabStyles.listItemStyles}
+                                    >
+                                        <Link
+                                            to={makeFacilityDetailLink(oarID)}
+                                            href={makeFacilityDetailLink(oarID)}
+                                            style={facilitiesTabStyles.linkStyles}
+                                        >
+                                            <ListItemText
+                                                primary={`${name} - ${countryName}`}
+                                                secondary={address}
+                                            />
+                                        </Link>
+                                    </ListItem>
+                                </Fragment>))
+                    }
+                    <ListItem style={facilitiesTabStyles.listBottomPaddingStyles} />
+                </List>
+            </div>
+        </Fragment>
+    );
+}
+
+FilterSidebarFacilitiesTab.defaultProps = {
+    data: null,
+    error: null,
+};
+
+FilterSidebarFacilitiesTab.propTypes = {
+    data: facilityCollectionPropType,
+    fetching: bool.isRequired,
+    error: arrayOf(string),
+    returnToSearchTab: func.isRequired,
+    searchTerm: string.isRequired,
+    updateSearchTerm: func.isRequired,
+};
+
+function mapStateToProps({
+    facilities: {
+        facilities: {
+            data,
+            error,
+            fetching,
+        },
+    },
+    ui: {
+        facilitiesSidebarTabSearch: {
+            searchTerm,
+        },
+    },
+}) {
+    return {
+        data,
+        error,
+        fetching,
+        searchTerm,
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        returnToSearchTab: () => dispatch(makeSidebarSearchTabActive()),
+        updateSearchTerm: e => dispatch((updateSidebarFacilitiesTabSearch(getValueFromEvent(e)))),
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(FilterSidebarFacilitiesTab);
diff --git a/src/app/src/components/FilterSidebarGuideTab.jsx b/src/app/src/components/FilterSidebarGuideTab.jsx
index 2cab55c84..57b300475 100644
--- a/src/app/src/components/FilterSidebarGuideTab.jsx
+++ b/src/app/src/components/FilterSidebarGuideTab.jsx
@@ -1,7 +1,12 @@
 import React, { memo } from 'react';
 
+import { filterSidebarStyles } from '../util/styles';
+
 const FilterSidebarGuideTab = memo(() => (
-    <div className="control-panel__content">
+    <div
+        className="control-panel__content"
+        style={filterSidebarStyles.controlPanelContentStyles}
+    >
         <p className="control-panel__body">
             The Open Apparel Registry (OAR) is a tool to
             identify every apparel facility worldwide.
diff --git a/src/app/src/components/FilterSidebarSearchTab.jsx b/src/app/src/components/FilterSidebarSearchTab.jsx
index 07b6f2160..93a0b22ac 100644
--- a/src/app/src/components/FilterSidebarSearchTab.jsx
+++ b/src/app/src/components/FilterSidebarSearchTab.jsx
@@ -24,6 +24,8 @@ import {
     facilityCollectionPropType,
 } from '../util/propTypes';
 
+import { filterSidebarStyles } from '../util/styles';
+
 import { getValueFromEvent } from '../util/util';
 
 const filterSidebarSearchTabStyles = Object.freeze({
@@ -94,7 +96,10 @@ function FilterSidebarSearchTab({
     })();
 
     return (
-        <div className="control-panel__content">
+        <div
+            className="control-panel__content"
+            style={filterSidebarStyles.controlPanelContentStyles}
+        >
             <div>
                 <div className="form__field">
                     <InputLabel
diff --git a/src/app/src/components/Footer.jsx b/src/app/src/components/Footer.jsx
index 638d99d2a..862e4a48b 100644
--- a/src/app/src/components/Footer.jsx
+++ b/src/app/src/components/Footer.jsx
@@ -25,7 +25,7 @@ const links = [
 ];
 
 export default () => (
-    <div className="footerContainer" xs={12}>
+    <footer className="footerContainer" xs={12}>
         <div className="links">
             {links.map((l) => {
                 if (l.external && 'prefix' in l) {
@@ -73,5 +73,5 @@ export default () => (
                 alt="Creative Commons Attribution"
             />
         </a>
-    </div>
+    </footer>
 );
diff --git a/src/app/src/components/LoginForm.jsx b/src/app/src/components/LoginForm.jsx
index 7348e0d0f..a73cb9184 100644
--- a/src/app/src/components/LoginForm.jsx
+++ b/src/app/src/components/LoginForm.jsx
@@ -6,6 +6,7 @@ import Grid from '@material-ui/core/Grid';
 
 import ControlledTextInput from './ControlledTextInput';
 import AppGrid from './AppGrid';
+import AppOverflow from './AppOverflow';
 import Button from './Button';
 import ShowOnly from './ShowOnly';
 import SendResetPasswordEmailForm from './SendResetPasswordEmailForm';
@@ -61,70 +62,72 @@ class LoginForm extends Component {
         }
 
         return (
-            <AppGrid title="Log In">
-                <Grid item xs={12} sm={7}>
-                    <p>
-                        You must be a registered user to contribute to the Open
-                        Apparel Registry.
-                        <br />
-                        Don&apos;t have an account?{' '}
-                        <Link
-                            to={authRegisterFormRoute}
-                            href={authRegisterFormRoute}
-                            className="link-underline"
-                        >
-                            Register
-                        </Link>
-                        .
-                    </p>
-                    <div className="form__field">
-                        <label
-                            className="form__label"
-                            htmlFor={LOGIN_EMAIL}
-                        >
-                            Email Address
-                        </label>
-                        <ControlledTextInput
-                            id={LOGIN_EMAIL}
-                            type="email"
-                            value={email}
-                            onChange={updateEmail}
+            <AppOverflow>
+                <AppGrid title="Log In">
+                    <Grid item xs={12} sm={7}>
+                        <p>
+                            You must be a registered user to contribute to the Open
+                            Apparel Registry.
+                            <br />
+                            Don&apos;t have an account?{' '}
+                            <Link
+                                to={authRegisterFormRoute}
+                                href={authRegisterFormRoute}
+                                className="link-underline"
+                            >
+                                Register
+                            </Link>
+                            .
+                        </p>
+                        <div className="form__field">
+                            <label
+                                className="form__label"
+                                htmlFor={LOGIN_EMAIL}
+                            >
+                                Email Address
+                            </label>
+                            <ControlledTextInput
+                                id={LOGIN_EMAIL}
+                                type="email"
+                                value={email}
+                                onChange={updateEmail}
+                            />
+                        </div>
+                        <div className="form__field">
+                            <label
+                                className="form__label"
+                                htmlFor={LOGIN_PASSWORD}
+                            >
+                                Password
+                            </label>
+                            <ControlledTextInput
+                                id={LOGIN_PASSWORD}
+                                type="password"
+                                value={password}
+                                onChange={updatePassword}
+                            />
+                        </div>
+                        <SendResetPasswordEmailForm />
+                        <ShowOnly when={!!(error && error.length)}>
+                            <ul style={formValidationErrorMessageStyle}>
+                                {
+                                    error && error.length
+                                        ? error.map(err => (
+                                            <li key={err}>
+                                                {err}
+                                            </li>))
+                                        : null
+                                }
+                            </ul>
+                        </ShowOnly>
+                        <Button
+                            text="Log In"
+                            onClick={submitForm}
+                            disabled={fetching}
                         />
-                    </div>
-                    <div className="form__field">
-                        <label
-                            className="form__label"
-                            htmlFor={LOGIN_PASSWORD}
-                        >
-                            Password
-                        </label>
-                        <ControlledTextInput
-                            id={LOGIN_PASSWORD}
-                            type="password"
-                            value={password}
-                            onChange={updatePassword}
-                        />
-                    </div>
-                    <SendResetPasswordEmailForm />
-                    <ShowOnly when={!!(error && error.length)}>
-                        <ul style={formValidationErrorMessageStyle}>
-                            {
-                                error && error.length
-                                    ? error.map(err => (
-                                        <li key={err}>
-                                            {err}
-                                        </li>))
-                                    : null
-                            }
-                        </ul>
-                    </ShowOnly>
-                    <Button
-                        text="Log In"
-                        onClick={submitForm}
-                        disabled={fetching}
-                    />
-                </Grid>
-            </AppGrid>
+                    </Grid>
+                </AppGrid>
+            </AppOverflow>
         );
     }
 }
diff --git a/src/app/src/components/MapAndSidebar.jsx b/src/app/src/components/MapAndSidebar.jsx
index 714cede51..8cc0bb3fa 100644
--- a/src/app/src/components/MapAndSidebar.jsx
+++ b/src/app/src/components/MapAndSidebar.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import Grid from '@material-ui/core/Grid';
 
@@ -15,7 +15,7 @@ import { facilityDetailsRoute } from '../util/constants';
 
 function MapAndSidebar() {
     return (
-        <div>
+        <Fragment>
             <LandingAlert />
             <Grid container>
                 <Grid
@@ -47,7 +47,7 @@ function MapAndSidebar() {
                     </Switch>
                 </Grid>
             </Grid>
-        </div>
+        </Fragment>
     );
 }
 
diff --git a/src/app/src/components/OARMap.jsx b/src/app/src/components/OARMap.jsx
index b6327e178..953af1535 100644
--- a/src/app/src/components/OARMap.jsx
+++ b/src/app/src/components/OARMap.jsx
@@ -37,7 +37,7 @@ const OARMapStyles = Object.freeze({
     copySearchButtonStyle: Object.freeze({
         position: 'absolute',
         right: '84px',
-        top: '84px',
+        top: '20px',
         fontSize: '12px',
     }),
 });
diff --git a/src/app/src/components/RegisterForm.jsx b/src/app/src/components/RegisterForm.jsx
index ce2ec8432..c6f961747 100644
--- a/src/app/src/components/RegisterForm.jsx
+++ b/src/app/src/components/RegisterForm.jsx
@@ -6,6 +6,7 @@ import Grid from '@material-ui/core/Grid';
 import memoize from 'lodash/memoize';
 
 import AppGrid from './AppGrid';
+import AppOverflow from './AppOverflow';
 import ShowOnly from './ShowOnly';
 import Button from './Button';
 import RegisterFormField from './RegisterFormField';
@@ -93,47 +94,49 @@ class RegisterForm extends Component {
                 />));
 
         return (
-            <AppGrid title="Register">
-                <p>
-                    Already have an account?{' '}
-                    <Link
-                        to={authLoginFormRoute}
-                        href={authLoginFormRoute}
-                        className="link-underline"
-                    >
-                        Log In
-                    </Link>
-                    .
-                </p>
-                <Grid container className="margin-bottom-100">
-                    <Grid item xs={12} sm={8}>
-                        <p>
-                            Thank you for contributing to the OAR. Every
-                            contribution further improves the accuracy of the
-                            database. Create an account to begin:
-                        </p>
-                        {formInputs}
-                        <ShowOnly when={!!(error && error.length)}>
-                            <ul style={formValidationErrorMessageStyle}>
-                                {
-                                    error && error.length
-                                        ? error.map(err => (
-                                            <li key={err}>
-                                                {err}
-                                            </li>
-                                        ))
-                                        : null
-                                }
-                            </ul>
-                        </ShowOnly>
-                        <Button
-                            text="Register"
-                            onClick={submitForm}
-                            disabled={fetching}
-                        />
+            <AppOverflow>
+                <AppGrid title="Register">
+                    <p>
+                        Already have an account?{' '}
+                        <Link
+                            to={authLoginFormRoute}
+                            href={authLoginFormRoute}
+                            className="link-underline"
+                        >
+                            Log In
+                        </Link>
+                        .
+                    </p>
+                    <Grid container className="margin-bottom-100">
+                        <Grid item xs={12} sm={8}>
+                            <p>
+                                Thank you for contributing to the OAR. Every
+                                contribution further improves the accuracy of the
+                                database. Create an account to begin:
+                            </p>
+                            {formInputs}
+                            <ShowOnly when={!!(error && error.length)}>
+                                <ul style={formValidationErrorMessageStyle}>
+                                    {
+                                        error && error.length
+                                            ? error.map(err => (
+                                                <li key={err}>
+                                                    {err}
+                                                </li>
+                                            ))
+                                            : null
+                                    }
+                                </ul>
+                            </ShowOnly>
+                            <Button
+                                text="Register"
+                                onClick={submitForm}
+                                disabled={fetching}
+                            />
+                        </Grid>
                     </Grid>
-                </Grid>
-            </AppGrid>
+                </AppGrid>
+            </AppOverflow>
         );
     }
 }
diff --git a/src/app/src/components/UserProfile.jsx b/src/app/src/components/UserProfile.jsx
index 44b8a2799..e54db18f8 100644
--- a/src/app/src/components/UserProfile.jsx
+++ b/src/app/src/components/UserProfile.jsx
@@ -6,6 +6,7 @@ import memoize from 'lodash/memoize';
 import noop from 'lodash/noop';
 
 import AppGrid from './AppGrid';
+import AppOverflow from './AppOverflow';
 import Button from './Button';
 import UserProfileField from './UserProfileField';
 import UserAPITokens from './UserAPITokens';
@@ -112,27 +113,29 @@ function UserProfile({
             />));
 
     return (
-        <AppGrid
-            title="My Profile"
-            style={profileStyles.appGridContainer}
-        >
-            <Grid item xs={12} sm={7}>
-                {profileInputs}
-                <div style={profileStyles.submitButton}>
-                    <Button
-                        text="Save Changes"
-                        onClick={submitForm}
-                        disabled={!isEditable && fetching}
-                        color="primary"
-                        variant="contained"
-                        disableRipple
-                    >
-                        Save Changes
-                    </Button>
-                </div>
-                <UserAPITokens />
-            </Grid>
-        </AppGrid>
+        <AppOverflow>
+            <AppGrid
+                title="My Profile"
+                style={profileStyles.appGridContainer}
+            >
+                <Grid item xs={12} sm={7}>
+                    {profileInputs}
+                    <div style={profileStyles.submitButton}>
+                        <Button
+                            text="Save Changes"
+                            onClick={submitForm}
+                            disabled={!isEditable && fetching}
+                            color="primary"
+                            variant="contained"
+                            disableRipple
+                        >
+                            Save Changes
+                        </Button>
+                    </div>
+                    <UserAPITokens />
+                </Grid>
+            </AppGrid>
+        </AppOverflow>
     );
 }
 
diff --git a/src/app/src/reducers/FacilitiesReducer.js b/src/app/src/reducers/FacilitiesReducer.js
index d6b9a0020..5f0448e75 100644
--- a/src/app/src/reducers/FacilitiesReducer.js
+++ b/src/app/src/reducers/FacilitiesReducer.js
@@ -69,6 +69,7 @@ export default createReducer({
         facilities: {
             fetching: { $set: true },
             error: { $set: null },
+            data: { $set: null },
         },
     }),
     [failFetchFacilities]: (state, payload) => update(state, {
diff --git a/src/app/src/reducers/UIReducer.js b/src/app/src/reducers/UIReducer.js
index bff133f03..314c1dd1a 100644
--- a/src/app/src/reducers/UIReducer.js
+++ b/src/app/src/reducers/UIReducer.js
@@ -4,12 +4,20 @@ import update from 'immutability-helper';
 import {
     makeSidebarGuideTabActive,
     makeSidebarSearchTabActive,
+    makeSidebarFacilitiesTabActive,
+    updateSidebarFacilitiesTabSearch,
+    resetSidebarFacilitiesTabSearch,
 } from '../actions/ui';
 
+import { completeFetchFacilities } from '../actions/facilities';
+
 import { filterSidebarTabsEnum } from '../util/constants';
 
 const initialState = Object.freeze({
     activeFilterSidebarTab: filterSidebarTabsEnum.search,
+    facilitiesSidebarTabSearch: Object.freeze({
+        searchTerm: '',
+    }),
 });
 
 export default createReducer({
@@ -22,5 +30,39 @@ export default createReducer({
         activeFilterSidebarTab: {
             $set: filterSidebarTabsEnum.search,
         },
+        facilitiesSidebarTabSearch: {
+            searchTerm: {
+                $set: initialState.facilitiesSidebarTabSearch.searchTerm,
+            },
+        },
+    }),
+    [makeSidebarFacilitiesTabActive]: state => update(state, {
+        activeFilterSidebarTab: {
+            $set: filterSidebarTabsEnum.facilities,
+        },
+    }),
+    [completeFetchFacilities]: state => update(state, {
+        activeFilterSidebarTab: {
+            $set: filterSidebarTabsEnum.facilities,
+        },
+        facilitiesSidebarTabSearch: {
+            searchTerm: {
+                $set: initialState.facilitiesSidebarTabSearch.searchTerm,
+            },
+        },
+    }),
+    [updateSidebarFacilitiesTabSearch]: (state, payload) => update(state, {
+        facilitiesSidebarTabSearch: {
+            searchTerm: {
+                $set: payload,
+            },
+        },
+    }),
+    [resetSidebarFacilitiesTabSearch]: state => update(state, {
+        facilitiesSidebarTabSearch: {
+            searchTerm: {
+                $set: initialState.facilitiesSidebarTabSearch.searchTerm,
+            },
+        },
     }),
 }, initialState);
diff --git a/src/app/src/styles/css/Map.css b/src/app/src/styles/css/Map.css
index c20d20d86..732ac937d 100644
--- a/src/app/src/styles/css/Map.css
+++ b/src/app/src/styles/css/Map.css
@@ -2,9 +2,7 @@
   background: #fff;
   box-shadow: 2px 0 4px rgba(0,0,0,.15);
   z-index: 1;
-  overflow: auto;
-  height: calc(100vh - 64px);
-  margin-top: 64px;
+  height: calc(100vh - 64px - 47px);
 }
 
 .panel-header {
@@ -31,7 +29,7 @@
 
 #map {
   position: absolute;
-  top: 64px;
+  top: 0;
   bottom: 0;
   width: 100%;
 }
diff --git a/src/app/src/util/constants.js b/src/app/src/util/constants.js
index 869b69bf3..cc0dee095 100644
--- a/src/app/src/util/constants.js
+++ b/src/app/src/util/constants.js
@@ -207,6 +207,7 @@ export const contributeReplacesNoneSelectionID = -1;
 export const filterSidebarTabsEnum = Object.freeze({
     guide: 'guide',
     search: 'search',
+    facilities: 'facilities',
 });
 
 export const filterSidebarTabs = Object.freeze([
@@ -218,6 +219,10 @@ export const filterSidebarTabs = Object.freeze([
         tab: filterSidebarTabsEnum.search,
         label: 'Search',
     }),
+    Object.freeze({
+        tab: filterSidebarTabsEnum.facilities,
+        label: 'Facilities',
+    }),
 ]);
 
 // These values must be kept in sync with the tuple of STATUS_CHOICES
diff --git a/src/app/src/util/propTypes.js b/src/app/src/util/propTypes.js
index 8b9204386..0588e9651 100644
--- a/src/app/src/util/propTypes.js
+++ b/src/app/src/util/propTypes.js
@@ -135,6 +135,7 @@ export const facilityPropType = shape({
         name: string.isRequired,
         address: string.isRequired,
         country_code: string.isRequired,
+        country_name: string.isRequired,
         other_names: arrayOf(string).isRequired,
         other_addresses: arrayOf(string).isRequired,
         contributors: arrayOf(string).isRequired,
diff --git a/src/app/src/util/styles.js b/src/app/src/util/styles.js
index f2f473b09..bd71cdfce 100644
--- a/src/app/src/util/styles.js
+++ b/src/app/src/util/styles.js
@@ -63,3 +63,10 @@ export const confirmRejectMatchRowStyles = Object.freeze({
         justifyContent: 'space-between',
     }),
 });
+
+export const filterSidebarStyles = Object.freeze({
+    controlPanelContentStyles: Object.freeze({
+        height: 'inherit',
+        overflow: 'auto',
+    }),
+});
diff --git a/src/app/src/util/util.facilitiesCSV.js b/src/app/src/util/util.facilitiesCSV.js
new file mode 100644
index 000000000..334380436
--- /dev/null
+++ b/src/app/src/util/util.facilitiesCSV.js
@@ -0,0 +1,45 @@
+/* eslint-disable camelcase */
+import flow from 'lodash/flow';
+
+import { joinDataIntoCSVString } from './util';
+
+export const csvHeaders = Object.freeze([
+    'oar_id',
+    'name',
+    'address',
+    'country_code',
+    'country_name',
+    'lat',
+    'lng',
+]);
+
+export const createFacilityRowFromFeature = ({
+    properties: {
+        name,
+        address,
+        country_code,
+        country_name,
+        oar_id,
+    },
+    geometry: {
+        coordinates: [
+            lng,
+            lat,
+        ],
+    },
+}) => Object.freeze([
+    oar_id,
+    name,
+    address,
+    country_code,
+    country_name,
+    lat,
+    lng,
+]);
+
+export const facilityReducer = (acc, next) =>
+    acc.concat([createFacilityRowFromFeature(next)]);
+
+export const formatDataForCSV = facilities => facilities.reduce(facilityReducer, [csvHeaders]);
+
+export const createFacilitiesCSV = flow(formatDataForCSV, data => joinDataIntoCSVString(data));
diff --git a/src/django/api/serializers.py b/src/django/api/serializers.py
index 3c4e8d3dd..0e7e415de 100644
--- a/src/django/api/serializers.py
+++ b/src/django/api/serializers.py
@@ -92,12 +92,13 @@ class FacilitySerializer(GeoFeatureModelSerializer):
     other_names = SerializerMethodField()
     other_addresses = SerializerMethodField()
     contributors = SerializerMethodField()
+    country_name = SerializerMethodField()
 
     class Meta:
         model = Facility
         fields = ('id', 'name', 'address', 'country_code', 'location',
                   'created_at', 'updated_at', 'oar_id', 'other_names',
-                  'other_addresses', 'contributors')
+                  'other_addresses', 'contributors', 'country_name')
         geo_field = 'location'
 
     # Added to ensure including the OAR ID in the geojson properties map
@@ -113,6 +114,9 @@ def get_other_addresses(self, facility):
     def get_contributors(self, facility):
         return facility.contributors()
 
+    def get_country_name(self, facility):
+        return COUNTRY_NAMES.get(facility.country_code, '')
+
 
 class FacilityMatchSerializer(ModelSerializer):
     oar_id = SerializerMethodField()