fix(security): move keys to env

.env.example

@@ -1,2 +1,3 @@
 DEV_URL=https://hmda-development-server.example.com
 MAPBOX_ACCESS_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+ALGOLIA_PUBLIC_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

README.md

@@ -143,8 +143,11 @@ HMDA Help requires a connection to the [HMDA Institutions API](https://github.co
 If your development does not require this integration, you can simply:
 
 1. Copy `.env.example` to `.env` and edit the environment variables.
-  - `DEV_URL` is the URL that the frontend app will use for API requests. It should not have a trailing slash.
-  - `MAPBOX_ACCESS_TOKEN` is the access token provided by Mapbox.com for the app's embedded maps. CFPB's token can be found in our [GitHub Enterprise wiki](https://GHE/HMDA-Operations/hmda-devops/wiki/Mapbox-credentials).
+
+- `DEV_URL` is the URL that the frontend app will use for API requests. It should not have a trailing slash.
+- `MAPBOX_ACCESS_TOKEN` is the access token provided by Mapbox.com for the app's embedded maps. CFPB's token can be found in our [GitHub Enterprise wiki](https://github.local/HMDA-Operations/hmda-devops/wiki/Mapbox-and-Algolia-credentials).
+- `ALGOLIA_PUBLIC_KEY` is the access token required for the site's search functionality. It's also in our [wiki](https://github.local/HMDA-Operations/hmda-devops/wiki/Mapbox-and-Algolia-credentials).
+
 2. Run `yarn start` to start a local development server at http://localhost:3000.
 
 #### Integrating with the Filing application
@@ -207,11 +210,13 @@ docker run -p 8080:8080 hmda/hmda-frontend
 ```
 
 ### Build image to run in EKS Cluster
+
 ```
 cp .env.example .env
 gsed -i 's/^.*MAPBOX_ACCESS.*$/MAPBOX_ACCESS_TOKEN=pk.xxx/' .env
 docker build --build-arg DOCKER_TAG=v3.3.1 --secret id=env_vars,src=.env  -t <AWS_Account>.dkr.ecr.us-east-1.amazonaws.com/hmda/hmda-frontend:v3.3.1
 ```
+
 To build using docker-compose:
 
 ```

src/common/Header.jsx

@@ -1,15 +1,15 @@
-import React, { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
+import { isBeta } from '../common/Beta'
 import BannerUSA from './BannerUSA'
 import { defaultLinks } from './constants/links'
-import { isBeta } from '../common/Beta'
 
-import './uswds/css/styles.css'
 import logo from './images/ffiec-logo.svg'
+import './uswds/css/styles.css'
 import closeBtn from './uswds/img/usa-icons/close.svg'
 
-import { DocSearch } from '@docsearch/react'
 import '@docsearch/css'
+import { DocSearch } from '@docsearch/react'
 
 export const hideHeaderFooter = (path) => {
   const parts = path && path.split('/')
@@ -159,7 +159,7 @@ const Header = ({ location: { pathname }, links = defaultLinks, ...props }) => {
               <DocSearch
                 appId='69RTFLDVTR'
                 indexName='ffiec-beta-cfpb'
-                apiKey='5c0ed9de237607b9a9cbb0ce5e136996'
+                apiKey={import.meta.env.ALGOLIA_PUBLIC_KEY}
               />
             )}
           </nav>

src/data-browser/maps/MapContainer.jsx

@@ -1,40 +1,40 @@
-import mapbox from 'mapbox-gl'
-import {
-  createContext,
-  useCallback,
+import React, {
+  useState,
   useEffect,
+  useCallback,
   useRef,
-  useState,
+  createContext,
 } from 'react'
 import Alert from '../../common/Alert.jsx'
-import { getCSV, runFetch } from '../api.js'
-import fips2Shortcode from '../constants/fipsToShortcode.js'
-import DatasetDocsLink from '../datasets/DatasetDocsLink.jsx'
-import { FilterReports } from './FilterReports'
-import { MapsController } from './MapsController'
-import { MapsNavBar } from './MapsNavBar'
-import { ReportSummary } from './ReportSummary'
-import { fetchFilterData } from './filterUtils.jsx'
-import {
-  addLayers,
-  getOrigPer1000,
-  makeLegend,
-  makeStops,
-  setOutline,
-  useBias,
-} from './layerUtils.jsx'
-import './mapbox.css'
-import { buildPopupHTML, popup } from './popupUtils.jsx'
 import {
   geographies,
-  getSelectData,
+  variables,
   getValuesForVariable,
+  getSelectData,
   makeCombinedDefaultValue,
   parseCombinedFilter,
-  variables,
   varNameMapping,
 } from './selectUtils.jsx'
+import {
+  setOutline,
+  getOrigPer1000,
+  makeLegend,
+  makeStops,
+  addLayers,
+  useBias,
+} from './layerUtils.jsx'
+import { popup, buildPopupHTML } from './popupUtils.jsx'
+import { fetchFilterData } from './filterUtils.jsx'
+import { runFetch, getCSV } from '../api.js'
+import fips2Shortcode from '../constants/fipsToShortcode.js'
+import mapbox from 'mapbox-gl'
 import { useReportData } from './useReportData.jsx'
+import { FilterReports } from './FilterReports'
+import { MapsNavBar } from './MapsNavBar'
+import { MapsController } from './MapsController'
+import { ReportSummary } from './ReportSummary'
+import './mapbox.css'
+import DatasetDocsLink from '../datasets/DatasetDocsLink.jsx'
 
 mapbox.accessToken = import.meta.env.MAPBOX_ACCESS_TOKEN
 
@@ -184,8 +184,6 @@ const MapContainer = (props) => {
   const [state2022Data, setState2022Data] = useState(null)
   const [county2023Data, setCounty2023Data] = useState(null)
   const [state2023Data, setState2023Data] = useState(null)
-  const [county2024Data, setCounty2024Data] = useState(null)
-  const [state2024Data, setState2024Data] = useState(null)
 
   const [filterData, setFilterData] = useState(null)
   const [tableFilterData, setTableFilterData] = useState(null)
@@ -223,8 +221,6 @@ const MapContainer = (props) => {
           return geography.value === 'state' ? state2022Data : county2022Data
         case '2023':
           return geography.value === 'state' ? state2023Data : county2023Data
-        case '2024':
-          return geography.value === 'state' ? state2024Data : county2024Data
         default:
           return null
       }
@@ -242,8 +238,6 @@ const MapContainer = (props) => {
       county2022Data,
       state2023Data,
       county2023Data,
-      state2024Data,
-      county2024Data,
     ],
   )
 
@@ -439,21 +433,6 @@ const MapContainer = (props) => {
     }
   }, [county2023Data, selectedGeography, year])
 
-  useEffect(() => {
-    if (
-      !county2024Data &&
-      selectedGeography.value === "county" &&
-      year === "2024"
-    ) {
-      fetchQ.push(1)
-      runFetch("/2024/county.json").then(jsonData => {
-        console.log(jsonData)
-        setCounty2024Data(jsonData)
-        fetchQ.pop()
-      })
-    }
-  }, [county2024Data, selectedGeography, year])
-
   useEffect(() => {
     if (
       !state2018Data &&
@@ -538,20 +517,6 @@ const MapContainer = (props) => {
     }
   }, [selectedGeography, state2023Data, year])
 
-    useEffect(() => {
-    if (
-      !state2024Data &&
-      selectedGeography.value === "state" &&
-      year === "2024"
-    ) {
-      fetchQ.push(1)
-      runFetch("/2024/state.json").then(jsonData => {
-        setState2024Data(jsonData)
-        fetchQ.pop()
-      })
-    }
-  }, [selectedGeography, state2024Data, year])
-
   useEffect(() => {
     setData(getBaseData(year, selectedGeography))
   }, [year, getBaseData, selectedGeography])

vite.config.js

@@ -7,7 +7,7 @@ import svgr from 'vite-plugin-svgr'
 
 dotenv.config()
 
-if (!process.env.MAPBOX_ACCESS_TOKEN) {
+if (!process.env.MAPBOX_ACCESS_TOKEN || !process.env.ALGOLIA_PUBLIC_KEY) {
   throw new Error(
     `
  __   __  _______  __   __    _______  _______  ______    _______  _______  _______
@@ -25,7 +25,8 @@ if (!process.env.MAPBOX_ACCESS_TOKEN) {
  _____| ||       || ||_|| ||   |___   |   |  |   _   ||   | | | |   ||   |_| |
 |_______||_______||_|   |_||_______|  |___|  |__| |__||___| |_|  |__||_______|
 
-👉 MAPBOX_ACCESS_TOKEN environment variable is not defined. Please set it in your .env file. 👈
+👉 Both MAPBOX_ACCESS_TOKEN and ALGOLIA_PUBLIC_KEY environment variables are required. 👈
+👉 Please define them in your .env file. 👈
 `,
   )
 }
@@ -39,12 +40,15 @@ export default () => {
       environment: 'jsdom',
       globals: true,
       include: ['src/**/__tests__/**/*.{test,spec}.{js,jsx}'],
-      exclude: ['oldTests/**', 'cypress/**', '**/node_modules/**']
+      exclude: ['oldTests/**', 'cypress/**', '**/node_modules/**'],
     },
     define: {
       'import.meta.env.MAPBOX_ACCESS_TOKEN': JSON.stringify(
         process.env.MAPBOX_ACCESS_TOKEN,
       ),
+      'import.meta.env.ALGOLIA_PUBLIC_KEY': JSON.stringify(
+        process.env.ALGOLIA_PUBLIC_KEY,
+      ),
     },
     css: {
       preprocessorOptions: {