Simplify how we detect app version, and include the info on more pages

backend/README.md

@@ -35,7 +35,7 @@ Names and regions should match above.
 
 1.  Update `GCS_BUCKET` in `backend/app.yaml`
 2.  Run `gcloud projects describe $PROJECT | grep projectNumber` and use the result to update `PROJECT_NUMBER` in `backend/app.yaml`
-3.  Create the files to deploy: `VITE_ON_GCP="true" VITE_RESOURCE_BASE="https://$PROJECT.ew.r.appspot.com/data" npm run build && cd backend && rm -rf dist && cp -R ../dist .`
+3.  Create the files to deploy: `VITE_RESOURCE_BASE="https://$PROJECT.ew.r.appspot.com/data" npm run build && cd backend && rm -rf dist && cp -R ../dist .`
 	- Note we could make Cloud Build do this, but we'd have to get `wasm-pack` and other things set up there first
 	- GH Actions will eventually trigger CI deployments for our test environment, and we've already done the work of configuring that build environment
 4.  `gcloud app --project=$PROJECT deploy --quiet` (takes a minute or two)

src/lib/browse/AppVersion.svelte

@@ -1,22 +1,7 @@
 <script lang="ts">
-  import { HelpButton } from "lib/common";
+  import { appVersion, HelpButton } from "lib/common";
 
-  let version = "unknown";
-  if (window.location.hostname == "localhost") {
-    version = "Local development";
-  } else if (window.location.hostname == "acteng.github.io") {
-    if (window.location.pathname == "/atip/browse.html") {
-      version = "Current development (public)";
-    } else {
-      let parts = window.location.pathname.split("/");
-      if (parts.length == 4 && parts[1] == "atip") {
-        version = `Development branch: ${parts[2]}`;
-      }
-    }
-  } else if (window.location.hostname.endsWith(".appspot.com")) {
-    // TODO Include a git commit, build timestamp, or similar
-    version = "Test (on GCP)";
-  }
+  let version = appVersion();
 </script>
 
 <p>
@@ -33,7 +18,7 @@
       Please contact <a href="mailto:dcarlino@turing.ac.uk">Dustin</a>
       and
       <a href="mailto:Peter.York@activetravelengland.gov.uk">Pete</a>
-       about any problems, ideas, or feedback for this site.
+      about any problems, ideas, or feedback for this site.
     </p>
   </HelpButton>
 </p>

src/lib/common/LoggedIn.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Cookies from "js-cookie";
+  import { appVersion } from "lib/common";
+  import { ErrorMessage } from "lib/govuk";
+
+  let email = Cookies.get("email");
+</script>
+
+{#if appVersion() == "Test (on GCP)"}
+  {#if email}
+    <p>Logged in as {email}</p>
+  {:else}
+    <ErrorMessage
+      errorMessage="You shouldn't be able to view this app without being logged in!"
+    />
+  {/if}
+{/if}

src/lib/common/index.ts

@@ -1,3 +1,6 @@
+import type { FeatureCollection, Polygon } from "geojson";
+import authoritiesUrl from "../../../assets/authorities.geojson?url";
+
 export { default as BaselayerSwitcher } from "./BaselayerSwitcher.svelte";
 export { default as CollapsibleCard } from "./CollapsibleCard.svelte";
 export { default as ColorLegend } from "./ColorLegend.svelte";
@@ -9,7 +12,34 @@ export { default as HelpButton } from "./HelpButton.svelte";
 export { default as InteractiveLayer } from "./InteractiveLayer.svelte";
 export { default as Layout } from "./Layout.svelte";
 export { default as Legend } from "./Legend.svelte";
+export { default as LoggedIn } from "./LoggedIn.svelte";
 export { default as MapLibreMap } from "./MapLibreMap.svelte";
 export { default as Modal } from "./Modal.svelte";
 export { default as StreetViewController } from "./StreetViewController.svelte";
 export { default as ZoomOutMap } from "./ZoomOutMap.svelte";
+
+export async function getAuthoritiesGeoJson(): Promise<
+  FeatureCollection<Polygon>
+> {
+  const resp = await fetch(authoritiesUrl);
+  return await resp.json();
+}
+
+export function appVersion(): string {
+  if (window.location.hostname == "localhost") {
+    return "Local development";
+  } else if (window.location.hostname == "acteng.github.io") {
+    let parts = window.location.pathname.split("/");
+    if (parts.length == 3 && parts[0] == "" && parts[1] == "atip") {
+      return "Current development (public)";
+    }
+    if (parts.length == 4 && parts[0] == "" && parts[1] == "atip") {
+      return `Development branch: ${parts[2]}`;
+    }
+  } else if (window.location.hostname.endsWith(".appspot.com")) {
+    // TODO Include a git commit, build timestamp, or similar
+    return "Test (on GCP)";
+  }
+
+  return "Unknown";
+}

src/pages/App.svelte

@@ -6,14 +6,16 @@
   import type { FeatureCollection, Polygon } from "geojson";
   import BoundaryLayer from "lib/BoundaryLayer.svelte";
   import {
+    appVersion,
     BaselayerSwitcher,
     CollapsibleCard,
+    getAuthoritiesGeoJson,
     Layout,
     Legend,
+    LoggedIn,
     MapLibreMap,
     ZoomOutMap,
   } from "lib/common";
-  import { getAuthoritiesGeoJson } from "lib/common/data_getter";
   import HoverLayer from "lib/draw/HoverLayer.svelte";
   import InterventionLayer from "lib/draw/InterventionLayer.svelte";
   import Toolbox from "lib/draw/Toolbox.svelte";
@@ -115,6 +117,8 @@
         Instructions
       </SecondaryButton>
     </div>
+    <p>App version: {appVersion()}</p>
+    <LoggedIn />
     <p>{schemaTitle(schema)} mode</p>
     <div style="display: flex; justify-content: space-between">
       <h1>{authorityName}</h1>

src/pages/BrowseSchemes.svelte

@@ -7,14 +7,15 @@
   import Filters from "lib/browse/Filters.svelte";
   import LayerControls from "lib/browse/LayerControls.svelte";
   import LoadRemoteSchemeData from "lib/browse/LoadRemoteSchemeData.svelte";
-  import LoggedIn from "lib/browse/LoggedIn.svelte";
   import SchemeCard from "lib/browse/SchemeCard.svelte";
   import authorityNamesList from "../../assets/authority_names.json";
   import "../style/main.css";
   import {
+    appVersion,
     FileInput,
     InteractiveLayer,
     Layout,
+    LoggedIn,
     MapLibreMap,
     ZoomOutMap,
   } from "lib/common";
@@ -96,9 +97,9 @@
       <ZoomOutMap boundaryGeojson={$gjScheme} />
     </div>
     <AppVersion />
-    {#if import.meta.env.VITE_ON_GCP === "true"}
+    <LoggedIn />
+    {#if appVersion() == "Test (on GCP)"}
       <LoadRemoteSchemeData {loadFile} />
-      <LoggedIn />
     {/if}
     <FileInput label="Load schemes from GeoJSON" id="load-geojson" {loadFile} />
     <ErrorMessage {errorMessage} />

src/pages/ChooseArea.svelte

@@ -13,8 +13,11 @@
   import { Map, type MapGeoJSONFeature } from "maplibre-gl";
   import { onMount } from "svelte";
   import "maplibre-gl/dist/maplibre-gl.css";
-  import { FileInput, InteractiveLayer } from "lib/common";
-  import { getAuthoritiesGeoJson } from "lib/common/data_getter";
+  import {
+    FileInput,
+    getAuthoritiesGeoJson,
+    InteractiveLayer,
+  } from "lib/common";
   import { bbox, hoveredToggle } from "lib/maplibre";
   import About from "lib/sidebar/About.svelte";
   import { map as mapStore } from "stores";

src/pages/CriticalIssueEntry.svelte

@@ -4,7 +4,13 @@
   import "../style/main.css";
   import type { LngLat } from "maplibre-gl";
   import { onMount } from "svelte";
-  import { Layout, MapLibreMap, StreetViewController } from "../lib/common";
+  import {
+    appVersion,
+    Layout,
+    LoggedIn,
+    MapLibreMap,
+    StreetViewController,
+  } from "../lib/common";
   import BaselayerSwitcher from "../lib/critical_entry/BaselayerSwitcher.svelte";
   import Form from "../lib/critical_entry/Form.svelte";
   import Pin from "../lib/critical_entry/Pin.svelte";
@@ -30,6 +36,8 @@
 <Layout sidebarWidth="35rem">
   <div slot="sidebar" class="govuk-prose">
     <h1>Critical issue entry</h1>
+    <p>App version: {appVersion()}</p>
+    <LoggedIn />
     {#if markerPosition}
       <Form pt={markerPosition} />
     {:else}