refactor config to load on init

.github/workflows/push.yaml

@@ -37,7 +37,7 @@ jobs:
       - name: Copy env file
         run: cp .env.example .env
       - name: Copy config file
-        run: cp ./src/assets/config.example.js ./src/assets/config.js
+        run: cp ./public/config/config.example.json ./public/config/config.json
       - name: Run unit tests
         run: npm run test
       - name: Run dev build

.gitignore

@@ -2,8 +2,8 @@
 
 .env*
 !.env.example
-/src/assets/config*.js
-!/src/assets/config.example.js
+/public/config/config*.json
+!/public/config/config.example.json
 
 # dependencies
 /node_modules

CHANGELOG.md

@@ -20,6 +20,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Moved config reference from `envSetupVars.js` into `search.jsx`
 - Geosearch moved under zoom control and changed to be collapsed
 - `VITE_ADVANCED_SEARCH_ENABLED` and `VITE_CART_ENABLED` must be set in `config.js`
+- Moved config location from `src/assets/config.js` to `public/config/config.json`
+- Refactor config to be a json object instead of separate exported constants
+- Changed config key names to remove the word `VITE` (leftover from when they were .env vars)
+- Refactor `default.js` to remove dead code and rename vars
 
 ### Fixed
 
@@ -34,6 +38,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - When polygon drawn, use as search intersects param instead of map viewport bbox
 - Added upload geojson feature to allow users to select a geojson file to add to map
 - Reusable System Message component for showing app alerts
+- Load `config.json` into redux on app load once instead of direct imports
+- Add pre-initialization page to handle and show error (and not render app) if config is missing
 
 ### Removed
 

package.json

@@ -29,6 +29,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@tsconfig/node18": "^2.0.1",
+    "@types/leaflet-draw": "^1.0.7",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.4",
     "@types/testing-library__jest-dom": "^5.14.6",

public/config/config.example.json

@@ -0,0 +1,104 @@
+{
+  "PUBLIC_URL": "http://example.com/",
+  "LOGO_URL": "./logo.png",
+  "LOGO_ALT": "Alt description for my custom logo",
+  "SHOW_PUBLISH_BTN": false,
+  "DEFAULT_COLLECTION": "collection-name",
+  "STAC_API_URL": "https://api-endpoint.example.com",
+  "API_MAX_ITEMS": 200,
+  "SCENE_TILER_URL": "https://titiler.example.com",
+  "DASHBOARD_BTN_URL": "https://dashboard.example.com",
+  "ANALYZE_BTN_URL": "https://dashboard.example.com",
+  "CF_TEMPLATE_URL": "https://cf-template.example.com",
+  "SCENE_TILER_PARAMS": {
+    "sentinel-2-l2a": {
+      "assets": ["red", "green", "blue"],
+      "color_formula": "Gamma+RGB+3.2+Saturation+0.8+Sigmoidal+RGB+12+0.35"
+    },
+    "landsat-c2-l2": {
+      "assets": ["red", "green", "blue"],
+      "color_formula": "Gamma+RGB+1.7+Saturation+1.7+Sigmoidal+RGB+15+0.35"
+    },
+    "naip": {
+      "assets": ["image"],
+      "bidx": "1,2,3"
+    },
+    "cop-dem-glo-30": {
+      "assets": ["data"],
+      "colormap_name": "terrain",
+      "rescale": ["-1000,4000"]
+    },
+    "cop-dem-glo-90": {
+      "assets": ["data"],
+      "colormap_name": "terrain",
+      "rescale": ["-1000,4000"]
+    },
+    "sentinel-1-grd": {
+      "assets": ["vv"],
+      "rescale": ["0,250"],
+      "colormap_name": "plasma"
+    }
+  },
+  "MOSAIC_TILER_URL": "https://titiler-mosaic.example.com",
+  "MOSAIC_TILER_PARAMS": {
+    "sentinel-2-l2a": {
+      "assets": ["visual"]
+    },
+    "landsat-c2-l2": {
+      "assets": ["red"],
+      "color_formula": "Gamma+R+1.7+Sigmoidal+R+15+0.35"
+    },
+    "naip": {
+      "assets": ["image"],
+      "bidx": "1,2,3"
+    },
+    "cop-dem-glo-30": {
+      "assets": ["data"],
+      "colormap_name": "terrain",
+      "rescale": ["-1000,4000"]
+    },
+    "cop-dem-glo-90": {
+      "assets": ["data"],
+      "colormap_name": "terrain",
+      "rescale": ["-1000,4000"]
+    },
+    "sentinel-1-grd": {
+      "assets": ["vv"],
+      "rescale": ["0,250"],
+      "colormap_name": "plasma"
+    }
+  },
+  "MOSAIC_MAX_ITEMS": 100,
+  "MOSAIC_MIN_ZOOM_LEVEL": 7,
+  "CONFIG_COLORMAP": "viridis",
+  "SEARCH_MIN_ZOOM_LEVELS": {
+    "sentinel-2-l2a": {
+      "medium": 4,
+      "high": 7
+    },
+    "landsat-c2-l2": {
+      "medium": 4,
+      "high": 7
+    },
+    "naip": {
+      "medium": 10,
+      "high": 14
+    },
+    "cop-dem-glo-30": {
+      "medium": 6,
+      "high": 8
+    },
+    "cop-dem-glo-90": {
+      "medium": 6,
+      "high": 8
+    },
+    "sentinel-1-grd": {
+      "medium": 7,
+      "high": 7
+    }
+  },
+  "BASEMAP_URL": "https://tile-provider.example.com/{z}/{x}/{y}.png",
+  "BASEMAP_HTML_ATTRIBUTION": "&copy; <a href=\"https://www.tile-provider.example.com/copyright\">TileProvider</a>",
+  "ADVANCED_SEARCH_ENABLED": false,
+  "CART_ENABLED": false
+}

src/App.css

@@ -8,3 +8,13 @@
 .leaflet-tooltip {
   font-family: 'Inter', sans-serif;
 }
+
+.appLoading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgb(53, 61, 79);
+  z-index: 0;
+}

src/App.jsx

@@ -11,6 +11,7 @@ import UploadGeojsonModal from './components/UploadGeojsonModal/UploadGeojsonMod
 import SystemMessage from './components/SystemMessage/SystemMessage'
 
 import { GetCollectionsService } from './services/get-collections-service'
+import { LoadConfigIntoStateService } from './services/get-config-service'
 import { useSelector } from 'react-redux'
 
 function App() {
@@ -29,23 +30,38 @@ function App() {
   const _showApplicationAlert = useSelector(
     (state) => state.mainSlice.showApplicationAlert
   )
+  const _appConfig = useSelector((state) => state.mainSlice.appConfig)
+
   useEffect(() => {
-    GetCollectionsService()
+    LoadConfigIntoStateService()
   }, [])
 
+  useEffect(() => {
+    if (_appConfig) {
+      GetCollectionsService()
+    }
+  }, [_appConfig])
+
   return (
     <React.StrictMode>
-      <div className="App">
-        <PageHeader></PageHeader>
-        <Content></Content>
-        {_showPublishModal ? <PublishModal /> : null}
-        {_showLaunchModal ? <LaunchModal /> : null}
-        {_showLaunchImageModal ? <LaunchImageModal /> : null}
-        {_showUploadGeojsonModal ? (
-          <UploadGeojsonModal></UploadGeojsonModal>
-        ) : null}
-        {_showApplicationAlert ? <SystemMessage></SystemMessage> : null}
-      </div>
+      {_appConfig ? (
+        <div className="App">
+          <PageHeader></PageHeader>
+          <Content></Content>
+          {_showPublishModal ? <PublishModal /> : null}
+          {_showLaunchModal ? <LaunchModal /> : null}
+          {_showLaunchImageModal ? <LaunchImageModal /> : null}
+          {_showUploadGeojsonModal ? (
+            <UploadGeojsonModal></UploadGeojsonModal>
+          ) : null}
+          {_showApplicationAlert ? <SystemMessage></SystemMessage> : null}
+        </div>
+      ) : (
+        <div className="App">
+          <div className="appLoading" data-testid="testAppLoading"></div>
+          {_showApplicationAlert ? <SystemMessage></SystemMessage> : null}
+        </div>
+      )}
     </React.StrictMode>
   )
 }

src/App.test.jsx

@@ -8,10 +8,13 @@ import {
   setShowLaunchModal,
   setShowLaunchImageModal,
   setshowUploadGeojsonModal,
-  setshowApplicationAlert
+  setshowApplicationAlert,
+  setappConfig
 } from './redux/slices/mainSlice'
 import { vi } from 'vitest'
 import * as CollectionsService from './services/get-collections-service'
+import * as LoadConfigService from './services/get-config-service'
+import { mockAppConfig } from './testing/shared-mocks'
 
 describe('App', () => {
   const setup = () =>
@@ -21,7 +24,10 @@ describe('App', () => {
       </Provider>
     )
 
-  describe('on app render', () => {
+  describe('on app render with config', () => {
+    beforeEach(() => {
+      store.dispatch(setappConfig(mockAppConfig))
+    })
     afterEach(() => {
       vi.restoreAllMocks()
     })
@@ -30,6 +36,11 @@ describe('App', () => {
       setup()
       expect(spy).toHaveBeenCalledTimes(1)
     })
+    it('should call LoadConfigIntoStateService once', () => {
+      const spy = vi.spyOn(LoadConfigService, 'LoadConfigIntoStateService')
+      setup()
+      expect(spy).toHaveBeenCalledTimes(1)
+    })
     it('should render the PageHeader component', () => {
       setup()
       const PageHeaderComponent = screen.queryByTestId('testPageHeader')
@@ -114,4 +125,24 @@ describe('App', () => {
       })
     })
   })
+  describe('on app render without config', () => {
+    afterEach(() => {
+      vi.restoreAllMocks()
+    })
+    it('should showAppLoading page', () => {
+      setup()
+      const PageHeaderComponent = screen.queryByTestId('testAppLoading')
+      expect(PageHeaderComponent).not.toBeNull()
+    })
+    it('should call LoadConfigIntoStateService once', () => {
+      const spy = vi.spyOn(LoadConfigService, 'LoadConfigIntoStateService')
+      setup()
+      expect(spy).toHaveBeenCalledTimes(1)
+    })
+    it('should call not GetCollectionsService', () => {
+      const spy = vi.spyOn(CollectionsService, 'GetCollectionsService')
+      setup()
+      expect(spy).not.toHaveBeenCalled()
+    })
+  })
 })