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

Create a react component with a form which takes inputs from the form to create
an API route to retrieve DAP API data. On submit the component makes the API calls
to retrieve the data and compiles it if there are multiple pages of data. The
component then downloads the data to the user's browser.

Add date-fns package for date manipulation and formatting
Add export-to-csv package for CSV formatting
Add reverse proxy for DAP API requests with auth header
Disable IPv6 DNS resolution for reverse proxy requests
Make the touchpoints feedback button accessible

.github/workflows/ci.yml

@@ -68,6 +68,8 @@ jobs:
     if: github.ref == 'refs/heads/develop'
     uses: 18F/analytics.usa.gov/.github/workflows/deploy.yml@develop
     with:
+      API_DOMAIN: ${{ vars.API_DOMAIN }}
+      API_PATH: ${{ vars.API_PATH_DEV }}
       APP_NAME: ${{ vars.APP_NAME_DEV }}
       APP_URL: ${{ vars.APP_URL_DEV }}
       CF_ORGANIZATION_NAME: ${{ vars.CF_ORGANIZATION_NAME }}
@@ -76,6 +78,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 +90,8 @@ jobs:
     if: github.ref == 'refs/heads/staging'
     uses: 18F/analytics.usa.gov/.github/workflows/deploy.yml@develop
     with:
+      #API_DOMAIN: ${{ vars.API_DOMAIN }}
+      #API_PATH: ${{ vars.API_PATH_STG }}
       APP_NAME: ${{ vars.APP_NAME_STG }}
       APP_URL: ${{ vars.APP_URL_STG }}
       CF_ORGANIZATION_NAME: ${{ vars.CF_ORGANIZATION_NAME }}
@@ -95,6 +100,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 +112,8 @@ jobs:
     if: github.ref == 'refs/heads/master'
     uses: 18F/analytics.usa.gov/.github/workflows/deploy.yml@develop
     with:
+      #API_DOMAIN: ${{ vars.API_DOMAIN }}
+      #API_PATH: ${{ vars.API_PATH_PRD }}
       APP_NAME: ${{ vars.APP_NAME_PRD }}
       APP_URL: ${{ vars.APP_URL_PRD }}
       CF_ORGANIZATION_NAME: ${{ vars.CF_ORGANIZATION_NAME }}
@@ -114,6 +122,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,12 @@
 on:
   workflow_call:
     inputs:
+      API_DOMAIN:
+        required: true
+        type: string
+      API_PATH:
+        required: true
+        type: string
       APP_NAME:
         required: true
         type: string
@@ -22,13 +28,18 @@ on:
         required: true
         type: string
     secrets:
+      API_KEY:
+        required: true
       CF_USERNAME:
         required: true
       CF_PASSWORD:
         required: true
       NEW_RELIC_LICENSE_KEY:
 
 env:
+  API_DOMAIN: ${{ inputs.API_DOMAIN }}
+  API_PATH: ${{ inputs.API_PATH }}
+  API_KEY: ${{ secrets.API_KEY }}
   APP_NAME: ${{ inputs.APP_NAME }}
   APP_URL: ${{ inputs.APP_URL }}
   CF_USERNAME: ${{ secrets.CF_USERNAME }}
@@ -76,9 +87,10 @@ 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 domain, API path, API key, and  S3 bucket URL for the environment
         run: |
-          envsubst '${S3_BUCKET_URL}' < nginx.conf.src > nginx.conf
+          envsubst '${API_DOMAIN} ${API_PATH} ${API_KEY} ${S3_BUCKET_URL}' < nginx.conf.src > nginx.conf
+          cat nginx.conf
       - name: Login to cloud.gov and deploy
         run: |
           set -e

README.md

@@ -183,6 +183,13 @@ make deploy_staging
 | Staging | staging | https://analytics-staging.app.cloud.gov |
 | Development | develop | https://analytics-develop.app.cloud.gov |
 
+#### API key
+
+The historical data downloads page of the site makes API calls (proxied through
+the site's NGINX server) which include an api.data.gov API key. This key is
+provided as configuration by CI during deployment and can be updated as needed
+in the CI deployment variables.
+
 ### Webpack Configuration
 
 The application compiles es6 modules into web friendly js via Wepback and the

_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

@@ -9,9 +9,15 @@
       <h1>Download the data</h1>
 
       <p>
-        <a href="/definitions">See data fields and metrics descriptions</a>
+        <a href="/historical-data-download">
+          See optiona to download Universal Analytics legacy reports (2018-2024)
+        </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/footer.html

@@ -27,12 +27,12 @@ <h3>About this Site</h3>
           >email the Digital Analytics Program</a
         >.
       </p>
-      <div id="contact-btn" class="usa-button--big">
+      <button id="contact-btn" class="usa-button--big">
         <svg class="usa-icon" aria-hidden="false" focusable="false" role="img">
           <use xlink:href="/assets/uswds/img/sprite.svg#forum"></use>
         </svg>
         Feedback
-      </div>
+      </button>
     </div>
     <div class="tablet:grid-col-4 padding-2 margin-0">
       <h3>Download the data</h3>

_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

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 }) {