chore(app-backend): Use v9 (#7435)

* switch paths to v9 + adjust mockserver

* switch tokens

* update env variables

* add auth to state

* prettier and merge v9 changes

---------

Co-authored-by: Tony <[email protected]>
Co-authored-by: tonypls <[email protected]>

.github/workflows/deploy_preview_branch.yml

@@ -5,7 +5,7 @@ on:
         required: true
       CLOUDFLARE_ACCOUNT_ID:
         required: true
-      VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN:
+      VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN_V9:
         required: true
 jobs:
   deploy:
@@ -39,7 +39,7 @@ jobs:
         working-directory: ./web
         run: pnpm run build
         env:
-          VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN: '${{ secrets.VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN }}'
+          VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN_V9: '${{ secrets.VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN_V9 }}'
       - name: Publish
         uses: cloudflare/pages-action@1
         with:

.github/workflows/deploy_staging.yml

@@ -35,7 +35,7 @@ jobs:
         working-directory: ./web
         run: pnpm run build
         env:
-          VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN: '${{ secrets.VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN }}'
+          VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN_V9: '${{ secrets.VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN_V9 }}'
       - name: Publish
         uses: cloudflare/pages-action@1
         with:

mobileapp/README.md

@@ -50,7 +50,7 @@ pnpm dev-ios
 
 ```bash
 
-SENTRY_AUTH_TOKEN="" VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN="" pnpm run build-web
+SENTRY_AUTH_TOKEN="" VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN_V9="" pnpm run build-web
 ```
 
 2. Then run one of these commands to open the build in XCode or Android Studio:

mobileapp/fastlane/Fastfile

@@ -10,7 +10,7 @@ android_dir = File.expand_path("../android")
 
 private_lane :build_web_app do
   ensure_env_vars(
-  env_vars: ['SENTRY_AUTH_TOKEN', 'VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN']
+  env_vars: ['SENTRY_AUTH_TOKEN', 'VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN_V9']
 )
   # Build the web app if we have both environment variables set
   sh("pnpm", "run", "build-web")

web/Earthfile

@@ -36,7 +36,7 @@ build:
   FROM +prepare
   RUN pnpm run create-generated-files
   RUN pnpm version minor
-  RUN --secret SENTRY_AUTH_TOKEN --secret VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN=ELECTRICITYMAP_PUBLIC_TOKEN pnpm run build
+  RUN --secret SENTRY_AUTH_TOKEN --secret VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN_V9=ELECTRICITYMAPS_APP_PUBLIC_TOKEN_V9 pnpm run build
 
   # Local outputs for debugging
   SAVE ARTIFACT ./config/world.json AS LOCAL ./config/world.json

web/README.md

@@ -42,13 +42,13 @@ Prerequisites:
 
 As an eMap internal team member, you can also run the app connected to production API instead of the mockserver:
 
-- Run `VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN='YOUR TOKEN' pnpm dev`
+- Run `VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN_V9='YOUR TOKEN' pnpm dev`
 - Add a `?remote=true` query parameter
 
 ### Building for production
 
 - Add an environment variable for `SENTRY_AUTH_TOKEN="find it here => https://sentry.io/settings/account/api/auth-tokens/"`
-- Add an environment variable for `VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN='YOUR TOKEN'`
+- Add an environment variable for `VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN_V9='YOUR TOKEN'`
 
 ## Geometries development
 

web/cypress/e2e/countrypanel.spec.ts

@@ -2,21 +2,21 @@
 // TODO: Convert to component test
 describe('Country Panel', () => {
   beforeEach(() => {
-    cy.interceptAPI('v8/state/hourly');
-    cy.interceptAPI('v8/meta');
+    cy.interceptAPI('v9/state/hourly');
+    cy.interceptAPI('v9/meta');
   });
 
   it('interacts with details', () => {
-    cy.interceptAPI('v8/details/hourly/DK-DK2');
+    cy.interceptAPI('v9/details/hourly/DK-DK2');
 
     cy.visit('/zone/DK-DK2?lang=en-GB', {
       onBeforeLoad(win) {
         delete win.navigator.__proto__.serviceWorker;
       },
     });
     cy.get('[data-test-id=close-modal]').click();
-    cy.waitForAPISuccess('v8/state/hourly');
-    cy.waitForAPISuccess('v8/details/hourly/DK-DK2');
+    cy.waitForAPISuccess('v9/state/hourly');
+    cy.waitForAPISuccess('v9/details/hourly/DK-DK2');
     cy.get('[data-test-id=loading-overlay]').should('not.exist');
     cy.contains('East Denmark');
     cy.contains('Carbon Intensity');
@@ -69,14 +69,14 @@ describe('Country Panel', () => {
 
   // TODO bring back when we have a no recent data message
   it.skip('asserts countryPanel contains "no-recent-data" message', () => {
-    cy.interceptAPI('v8/details/hourly/UA');
+    cy.interceptAPI('v9/details/hourly/UA');
     cy.visit('/zone/UA?lang=en-GB', {
       onBeforeLoad(win) {
         delete win.navigator.__proto__.serviceWorker;
       },
     });
-    cy.waitForAPISuccess('v8/state/hourly');
-    cy.waitForAPISuccess('v8/details/hourly/UA');
+    cy.waitForAPISuccess('v9/state/hourly');
+    cy.waitForAPISuccess('v9/details/hourly/UA');
 
     cy.get('[data-test-id=no-data-overlay-message]')
       .should('exist')
@@ -85,64 +85,64 @@ describe('Country Panel', () => {
 
   it('asserts countryPanel contains no parser message when zone has no data', () => {
     // Add all required API intercepts
-    cy.interceptAPI('v8/state/hourly');
-    cy.interceptAPI('v8/details/hourly/CN');
-    cy.interceptAPI('v8/meta'); // Add this if needed
+    cy.interceptAPI('v9/state/hourly');
+    cy.interceptAPI('v9/details/hourly/CN');
+    cy.interceptAPI('v9/meta'); // Add this if needed
 
     cy.visit('/zone/CN/24h?lang=en-GB', {
       onBeforeLoad(win) {
         delete win.navigator.__proto__.serviceWorker;
       },
     });
 
-    cy.waitForAPISuccess('v8/state/hourly');
-    cy.waitForAPISuccess('v8/details/hourly/CN');
+    cy.waitForAPISuccess('v9/state/hourly');
+    cy.waitForAPISuccess('v9/details/hourly/CN');
 
     cy.get('[data-test-id=no-parser-message]').should('exist');
   });
 
   // TODO(AVO-659): fix flaky tests
   it.skip('scrolls to anchor element if provided a hash in url', () => {
-    cy.interceptAPI('v8/details/hourly/DK-DK2');
+    cy.interceptAPI('v9/details/hourly/DK-DK2');
 
     cy.visit('/zone/DK-DK2?lang=en-GB#origin_chart', {
       onBeforeLoad(win) {
         delete win.navigator.__proto__.serviceWorker;
       },
     });
     cy.get('[data-test-id=close-modal]').click();
-    cy.waitForAPISuccess('v8/state/hourly');
-    cy.waitForAPISuccess('v8/details/hourly/DK-DK2');
+    cy.waitForAPISuccess('v9/state/hourly');
+    cy.waitForAPISuccess('v9/details/hourly/DK-DK2');
     // eslint-disable-next-line cypress/require-data-selectors
     cy.get('#origin_chart').should('be.visible');
   });
 
   it.skip('scrolls to anchor element if provided a hash with caps in url', () => {
-    cy.interceptAPI('v8/details/hourly/DK-DK2');
+    cy.interceptAPI('v9/details/hourly/DK-DK2');
 
     cy.visit('/zone/DK-DK2?lang=en-GB#oRiGiN_ChArT', {
       onBeforeLoad(win) {
         delete win.navigator.__proto__.serviceWorker;
       },
     });
     cy.get('[data-test-id=close-modal]').click();
-    cy.waitForAPISuccess('v8/state/hourly');
-    cy.waitForAPISuccess('v8/details/hourly/DK-DK2');
+    cy.waitForAPISuccess('v9/state/hourly');
+    cy.waitForAPISuccess('v9/details/hourly/DK-DK2');
     // eslint-disable-next-line cypress/require-data-selectors
     cy.get('#origin_chart').should('be.visible');
   });
 
   it('does not scroll or error if provided a non-sensical hash in url', () => {
-    cy.interceptAPI('v8/details/hourly/DK-DK2');
+    cy.interceptAPI('v9/details/hourly/DK-DK2');
 
     cy.visit('/zone/DK-DK2?lang=en-GB##not-a-thing', {
       onBeforeLoad(win) {
         delete win.navigator.__proto__.serviceWorker;
       },
     });
     cy.get('[data-test-id=close-modal]').click();
-    cy.waitForAPISuccess('v8/state/hourly');
-    cy.waitForAPISuccess('v8/details/hourly/DK-DK2');
+    cy.waitForAPISuccess('v9/state/hourly');
+    cy.waitForAPISuccess('v9/details/hourly/DK-DK2');
     cy.get('[data-test-id=left-panel] [data-test-id=co2-square-value]').should(
       'be.visible'
     );

web/cypress/e2e/map.spec.ts

@@ -2,10 +2,10 @@
 // TODO: Uncomment tests
 describe('Map', () => {
   it('interacts with the map', () => {
-    cy.interceptAPI('v8/state/hourly');
+    cy.interceptAPI('v9/state/hourly');
     cy.visit('/?lang=en-GB');
     cy.get('[data-test-id=close-modal]').click();
-    cy.waitForAPISuccess(`v8/state/hourly`);
+    cy.waitForAPISuccess(`v9/state/hourly`);
     cy.get('[data-test-id=loading-overlay]').should('not.exist');
 
     // test map

web/cypress/e2e/ranking.spec.ts

@@ -1,13 +1,13 @@
 // TODO: Convert to component test and uncomment test
 describe('Ranking Panel', () => {
   it('interacts with details', () => {
-    cy.interceptAPI('v8/meta');
-    cy.interceptAPI('v8/state/hourly');
-    cy.interceptAPI('v8/details/hourly/DK-DK2');
+    cy.interceptAPI('v9/meta');
+    cy.interceptAPI('v9/state/hourly');
+    cy.interceptAPI('v9/details/hourly/DK-DK2');
     cy.visit('/?lang=en-GB');
     cy.get('[data-test-id=close-modal]').click();
-    cy.waitForAPISuccess(`v8/meta`);
-    cy.waitForAPISuccess(`v8/state/hourly`);
+    cy.waitForAPISuccess(`v9/meta`);
+    cy.waitForAPISuccess(`v9/state/hourly`);
     cy.get('[data-test-id=loading-overlay]').should('not.exist');
 
     // Close the ranking panel accordion

web/cypress/e2e/timeslider.spec.ts

@@ -1,7 +1,7 @@
-// import dailyData from '../../../mockserver/public/v8/details/daily/DK-DK2.json';
-import hourlyData from '../../../mockserver/public/v8/details/hourly/DK-DK2.json';
-import monthlyData from '../../../mockserver/public/v8/details/monthly/DK-DK2.json';
-import yearlyData from '../../../mockserver/public/v8/details/yearly/DK-DK2.json';
+// import dailyData from '../../../mockserver/public/v9/details/daily/DK-DK2.json';
+import hourlyData from '../../../mockserver/public/v9/details/hourly/DK-DK2.json';
+import monthlyData from '../../../mockserver/public/v9/details/monthly/DK-DK2.json';
+import yearlyData from '../../../mockserver/public/v9/details/yearly/DK-DK2.json';
 
 // TODO: For some reason the project's date formatter
 // cannot be imported (webpack compilation error) here
@@ -40,22 +40,22 @@ const getco2intensity = (index: number, data: Data) => {
 describe('TimeController', () => {
   it('interacts with the timecontroller on map', () => {
     // Intercepts all API network requests and serves fixtures directly
-    cy.interceptAPI('v8/state/hourly');
-    cy.interceptAPI('v8/details/hourly/DK-DK2');
-    cy.interceptAPI('v8/state/daily');
-    cy.interceptAPI('v8/state/monthly');
-    cy.interceptAPI('v8/state/yearly');
-    cy.interceptAPI('v8/details/daily/DK-DK2');
-    cy.interceptAPI('v8/details/monthly/DK-DK2');
-    cy.interceptAPI('v8/details/yearly/DK-DK2');
+    cy.interceptAPI('v9/state/hourly');
+    cy.interceptAPI('v9/details/hourly/DK-DK2');
+    cy.interceptAPI('v9/state/daily');
+    cy.interceptAPI('v9/state/monthly');
+    cy.interceptAPI('v9/state/yearly');
+    cy.interceptAPI('v9/details/daily/DK-DK2');
+    cy.interceptAPI('v9/details/monthly/DK-DK2');
+    cy.interceptAPI('v9/details/yearly/DK-DK2');
 
     // Note that we force language here as CI and local machines might display dates differently otherwise
     cy.visit('/zone/DK-DK2?lang=en-GB');
     cy.get('[data-test-id=loading-overlay]').should('not.exist');
     cy.get('[data-test-id=close-modal]').click();
     // Hourly
-    cy.waitForAPISuccess(`v8/state/hourly`);
-    cy.waitForAPISuccess(`v8/details/hourly/DK-DK2`);
+    cy.waitForAPISuccess(`v9/state/hourly`);
+    cy.waitForAPISuccess(`v9/details/hourly/DK-DK2`);
     cy.contains('LIVE');
     cy.get('[data-test-id=co2-square-value').should(
       'contain.text',
@@ -73,8 +73,8 @@ describe('TimeController', () => {
 
     // Monthly
     cy.get('[data-test-id="time-controller-daily"]').click();
-    cy.waitForAPISuccess(`v8/state/daily`);
-    cy.waitForAPISuccess(`v8/details/daily/DK-DK2`);
+    cy.waitForAPISuccess(`v9/state/daily`);
+    cy.waitForAPISuccess(`v9/details/daily/DK-DK2`);
     // cy.get('[data-test-id=co2-square-value').should(
     //   'contain.text',
     //   getco2intensity(30, dailyData)
@@ -95,8 +95,8 @@ describe('TimeController', () => {
 
     // Yearly
     cy.get('[data-test-id="time-controller-monthly"]').click();
-    cy.waitForAPISuccess(`v8/state/monthly`);
-    cy.waitForAPISuccess(`v8/details/monthly/DK-DK2`);
+    cy.waitForAPISuccess(`v9/state/monthly`);
+    cy.waitForAPISuccess(`v9/details/monthly/DK-DK2`);
     cy.get('[data-test-id=co2-square-value').should(
       'contain.text',
       getco2intensity(12, monthlyData)
@@ -117,8 +117,8 @@ describe('TimeController', () => {
 
     // 5 Years
     cy.get('[data-test-id="time-controller-yearly"]').click();
-    cy.waitForAPISuccess(`v8/state/yearly`);
-    cy.waitForAPISuccess(`v8/details/yearly/DK-DK2`);
+    cy.waitForAPISuccess(`v9/state/yearly`);
+    cy.waitForAPISuccess(`v9/details/yearly/DK-DK2`);
     cy.get('[data-test-id=co2-square-value').should(
       'contain.text',
       getco2intensity(-1, yearlyData)

web/src/api/getMeta.ts

@@ -9,7 +9,7 @@ export interface Meta {
 }
 
 export async function getMeta(): Promise<Meta> {
-  const path: URL = new URL(`/v8/${QUERY_KEYS.META}`, getBasePath());
+  const path: URL = new URL(`/v9/${QUERY_KEYS.META}`, getBasePath());
 
   try {
     const response = await fetch(path);

web/src/api/getState.ts

@@ -5,7 +5,7 @@ import type { GridState, RouteParameters } from 'types';
 import { TimeAverages } from 'utils/constants';
 import { URL_TO_TIME_AVERAGE } from 'utils/state/atoms';
 
-import { cacheBuster, getBasePath, isValidDate, QUERY_KEYS } from './helpers';
+import { cacheBuster, getBasePath, getHeaders, isValidDate, QUERY_KEYS } from './helpers';
 
 const getState = async (
   timeAverage: TimeAverages,
@@ -14,16 +14,21 @@ const getState = async (
   const shouldQueryHistorical =
     targetDatetime && isValidDate(targetDatetime) && timeAverage === TimeAverages.HOURLY;
   const path: URL = new URL(
-    `v8/state/${timeAverage}${
+    `v9/state/${timeAverage}${
       shouldQueryHistorical ? `?targetDate=${targetDatetime}` : ''
     }`,
     getBasePath()
   );
 
+  const requestOptions: RequestInit = {
+    method: 'GET',
+    headers: await getHeaders(path),
+  };
+
   if (!targetDatetime) {
     path.searchParams.append('cacheKey', cacheBuster());
   }
-  const response = await fetch(path);
+  const response = await fetch(path, requestOptions);
   if (response.ok) {
     const result = (await response.json()) as GridState;
     return result;

web/src/api/getWeatherData.ts

@@ -59,7 +59,7 @@ export async function fetchGfsForecast(
 ): Promise<GfsForecastResponse> {
   const targetTime = targetTimeFunction[period](endTime);
 
-  const path: URL = new URL(`v8/gfs/${resource}`, getBasePath());
+  const path: URL = new URL(`v9/gfs/${resource}`, getBasePath());
   path.searchParams.append('refTime', startTime.toISOString());
   path.searchParams.append('targetTime', targetTime);
 

web/src/api/getZone.ts

@@ -20,7 +20,7 @@ const getZone = async (
     targetDatetime && isValidDate(targetDatetime) && timeAverage === TimeAverages.HOURLY;
 
   const path: URL = new URL(
-    `v8/details/${timeAverage}/${zoneId}${
+    `v9/details/${timeAverage}/${zoneId}${
       shouldQueryHistorical ? `?targetDate=${targetDatetime}` : ''
     }`,
     getBasePath()

web/src/api/helpers.ts

@@ -33,10 +33,10 @@ function isUsingLocalEndpoint(): boolean {
 
 function getToken(): string {
   invariant(
-    import.meta.env.VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN,
-    'VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN is not defined in environment'
+    import.meta.env.VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN_V9,
+    'VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN_V9 is not defined in environment'
   );
-  return String(import.meta.env.VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN);
+  return String(import.meta.env.VITE_PUBLIC_ELECTRICITYMAP_PUBLIC_TOKEN_V9);
 }
 
 /**