[GH-1264] Add historical-data-download page

.github/workflows/ci.yml

@@ -68,6 +68,7 @@ jobs:
     if: github.ref == 'refs/heads/feature/add_historical_data_page'
     uses: 18F/analytics.usa.gov/.github/workflows/deploy.yml@develop
     with:
+      API_URL: ${{ vars.API_URL_DEV }}
       APP_NAME: ${{ vars.APP_NAME_DEV }}
       APP_URL: ${{ vars.APP_URL_DEV }}
       CF_ORGANIZATION_NAME: ${{ vars.CF_ORGANIZATION_NAME }}
@@ -76,6 +77,7 @@ jobs:
       S3_BUCKET_URL: ${{ vars.S3_BUCKET_URL_DEV }}
       S3_SERVICE_NAME: ${{ vars.S3_SERVICE_NAME_DEV }}
     secrets:
+      API_KEY: ${{ secrets.API_KEY_DEV }}
       CF_USERNAME: ${{ secrets.CF_USERNAME_DEV }}
       CF_PASSWORD: ${{ secrets.CF_PASSWORD_DEV }}
       NEW_RELIC_LICENSE_KEY: ${{ secrets.NEW_RELIC_LICENSE_KEY_DEV }}
@@ -87,6 +89,7 @@ jobs:
     if: github.ref == 'refs/heads/staging'
     uses: 18F/analytics.usa.gov/.github/workflows/deploy.yml@develop
     with:
+      API_URL: ${{ vars.API_URL_STG }}
       APP_NAME: ${{ vars.APP_NAME_STG }}
       APP_URL: ${{ vars.APP_URL_STG }}
       CF_ORGANIZATION_NAME: ${{ vars.CF_ORGANIZATION_NAME }}
@@ -95,6 +98,7 @@ jobs:
       S3_BUCKET_URL: ${{ vars.S3_BUCKET_URL_STG }}
       S3_SERVICE_NAME: ${{ vars.S3_SERVICE_NAME_STG }}
     secrets:
+      API_KEY: ${{ secrets.API_KEY_STG }}
       CF_USERNAME: ${{ secrets.CF_USERNAME_STG }}
       CF_PASSWORD: ${{ secrets.CF_PASSWORD_STG }}
       NEW_RELIC_LICENSE_KEY: ${{ secrets.NEW_RELIC_LICENSE_KEY_STG }}
@@ -106,6 +110,7 @@ jobs:
     if: github.ref == 'refs/heads/master'
     uses: 18F/analytics.usa.gov/.github/workflows/deploy.yml@develop
     with:
+      API_URL: ${{ vars.API_URL_PRD }}
       APP_NAME: ${{ vars.APP_NAME_PRD }}
       APP_URL: ${{ vars.APP_URL_PRD }}
       CF_ORGANIZATION_NAME: ${{ vars.CF_ORGANIZATION_NAME }}
@@ -114,6 +119,7 @@ jobs:
       S3_BUCKET_URL: ${{ vars.S3_BUCKET_URL_PRD }}
       S3_SERVICE_NAME: ${{ vars.S3_SERVICE_NAME_PRD }}
     secrets:
+      API_KEY: ${{ secrets.API_KEY_PRD }}
       CF_USERNAME: ${{ secrets.CF_USERNAME_PRD }}
       CF_PASSWORD: ${{ secrets.CF_PASSWORD_PRD }}
       NEW_RELIC_LICENSE_KEY: ${{ secrets.NEW_RELIC_LICENSE_KEY_PRD }}

.github/workflows/deploy.yml

@@ -1,6 +1,9 @@
 on:
   workflow_call:
     inputs:
+      API_URL:
+        required: true
+        type: string
       APP_NAME:
         required: true
         type: string
@@ -22,13 +25,17 @@ on:
         required: true
         type: string
     secrets:
+      API_KEY:
+        required: true
       CF_USERNAME:
         required: true
       CF_PASSWORD:
         required: true
       NEW_RELIC_LICENSE_KEY:
 
 env:
+  API_URL: ${{ inputs.API_URL }}
+  API_KEY: ${{ secrets.API_KEY }}
   APP_NAME: ${{ inputs.APP_NAME }}
   APP_URL: ${{ inputs.APP_URL }}
   CF_USERNAME: ${{ secrets.CF_USERNAME }}
@@ -76,9 +83,9 @@ jobs:
           mv manifest.yml manifest.yml.src
           envsubst < manifest.yml.src > manifest.yml
           cat manifest.yml
-      - name: Run envsubst on nginx.conf to set the S3 bucket URL for the environment
+      - name: Run envsubst on nginx.conf to set the API URL, API key, and  S3 bucket URL for the environment
         run: |
-          envsubst '${S3_BUCKET_URL}' < nginx.conf.src > nginx.conf
+          envsubst '${API_URL} ${API_KEY} ${S3_BUCKET_URL}' < nginx.conf.src > nginx.conf
       - name: Login to cloud.gov and deploy
         run: |
           set -e

_config.yml

@@ -55,6 +55,8 @@ description: "Official data on web traffic to thousands of US federal government
 # Site's own URL
 url: https://analytics.usa.gov
 
+api_url: https://analytics.usa.gov/api
+
 # Default dropdown title, will not appear if there are no sub-pages
 dropdown_title: Government-Wide
 

_development.yml

@@ -1,5 +1,5 @@
 url: http://localhost:4000
-# Use production data by default.
-# To pull from dev data for home page, uncomment:
-# data_url: http://localhost:4000/fake-data
+
+api_url: https://localhost:4000/api
+
 data_url: http://localhost:4000/ga4-data

_includes/data_download.html

@@ -12,6 +12,10 @@ <h1>Download the data</h1>
         <a href="/definitions">See data fields and metrics descriptions</a>
       </p>
 
+      <!--
+        Prettier tries to force double quotes here, which causes problems with
+        the JSON passed to the agencies property, so ignore this div for linting
+      -->
       <!-- prettier-ignore -->
       <div
         id="analytics-agency-select-root"

_includes/historical_data_download.html

@@ -2,4 +2,15 @@
   The contents of this page are populated by react components. See
   ./js/components/historical_data_download for the rendering logic.
 -->
-<main id="historical-data-download-root" dataURL="{{ site.data_url }}"></main>
+
+<!--
+  Prettier tries to force double quotes here, which causes problems with
+  the JSON passed to the agencies property, so ignore this div for linting
+-->
+<!-- prettier-ignore -->
+<main
+  id="historical-data-download-root"
+  apiURL="{{ site.api_url }}"
+  mainAgencyName="{{ site.dropdown_title }}"
+  agencies='{{ site.data.agencies | jsonify }}'
+></main>

_staging.yml

@@ -1,3 +1,4 @@
 
 url: https://analytics-staging.app.cloud.gov
+api_url: https://analytics-staging.app.cloud.gov/api
 data_url: https://analytics-staging.app.cloud.gov/data

assets/bundle.js.LICENSE.txt

@@ -39,3 +39,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

historical-data-download.html

@@ -0,0 +1,6 @@
+---
+layout: default
+permalink: /historical-data-download/
+---
+
+{% include historical_data_download.html %}

js/components/agency_select/AgencySelect.js

@@ -5,12 +5,12 @@ import PropTypes from "prop-types";
  * Creates a select tag with options populated from the provided props. When an
  * option is chosen, the browser is redirected to the page for that agency.
  *
- * @param {String} props.mainAgencyName the option name to display for the default
+ * @param {String} mainAgencyName the option name to display for the default
  * option in the select.
- * @param {String} props.agencies a JSON string of an array of objects with slug
+ * @param {String} agencies a JSON string of an array of objects with slug
  * and name keys. 'slug' is the page path for the agency, and 'name' is the
  * display name for the option.
- * @param {String} props.pathSuffix a URL path to append to the end of the
+ * @param {String} pathSuffix a URL path to append to the end of the
  * agency slug.
  */
 function AgencySelect({ mainAgencyName, agencies, pathSuffix }) {