feat: setup Satellite basemap selection in MapAndLabel editor (#3572)

theopensystemslab · Aug 28, 2024 · 065d238 · 065d238
1 parent 6806573
commit 065d238
Show file tree

Hide file tree

Showing 19 changed files with 163 additions and 82 deletions.
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
@@ -211,6 +211,7 @@ jobs:
           VITE_APP_API_URL: https://api.${{ env.FULL_DOMAIN }}
           VITE_APP_HASURA_URL: https://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
           VITE_APP_HASURA_WEBSOCKET: wss://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
+          VITE_APP_MAPBOX_ACCESS_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
           VITE_APP_SHAREDB_URL: wss://sharedb.${{ env.FULL_DOMAIN }}
           # needed because there's no API to change google's allowed OAuth URLs
           VITE_APP_GOOGLE_OAUTH_OVERRIDE: https://api.editor.planx.dev
@@ -226,6 +227,7 @@ jobs:
           VITE_APP_API_URL: https://api.${{ env.FULL_DOMAIN }}
           VITE_APP_HASURA_URL: https://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
           VITE_APP_HASURA_WEBSOCKET: wss://hasura.${{ env.FULL_DOMAIN }}/v1/graphql
+          VITE_APP_MAPBOX_ACCESS_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
           VITE_APP_SHAREDB_URL: wss://sharedb.${{ env.FULL_DOMAIN }}
           VITE_APP_GOOGLE_OAUTH_OVERRIDE: https://api.editor.planx.dev
           VITE_APP_ENV: pizza

diff --git a/.github/workflows/push-main.yml b/.github/workflows/push-main.yml
@@ -53,13 +53,14 @@ jobs:
       - run: pnpm build
         working-directory: editor.planx.uk
         env:
+          VITE_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
+          VITE_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
           VITE_APP_API_URL: https://api.editor.planx.dev
+          VITE_APP_ENV: staging
           VITE_APP_HASURA_URL: https://hasura.editor.planx.dev/v1/graphql
+          VITE_APP_MAPBOX_ACCESS_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
           VITE_APP_HASURA_WEBSOCKET: wss://hasura.editor.planx.dev/v1/graphql
           VITE_APP_SHAREDB_URL: wss://sharedb.editor.planx.dev
-          VITE_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
-          VITE_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
-          VITE_APP_ENV: staging
       - name: Upload Build Artifact
         uses: actions/upload-artifact@v4
         with:

diff --git a/.github/workflows/push-production.yml b/.github/workflows/push-production.yml
@@ -53,13 +53,14 @@ jobs:
       - run: pnpm build
         working-directory: editor.planx.uk
         env:
+          VITE_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
+          VITE_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
           VITE_APP_API_URL: https://api.editor.planx.uk
+          VITE_APP_ENV: production
           VITE_APP_HASURA_URL: https://hasura.editor.planx.uk/v1/graphql
           VITE_APP_HASURA_WEBSOCKET: wss://hasura.editor.planx.uk/v1/graphql
+          VITE_APP_MAPBOX_ACCESS_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
           VITE_APP_SHAREDB_URL: wss://sharedb.editor.planx.uk
-          VITE_APP_AIRBRAKE_PROJECT_ID: ${{ secrets.AIRBRAKE_PROJECT_ID }}
-          VITE_APP_AIRBRAKE_PROJECT_KEY: ${{ secrets.AIRBRAKE_PROJECT_KEY }}
-          VITE_APP_ENV: production
       - name: Upload Build Artifact
         uses: actions/upload-artifact@v4
         with:

diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,7 @@ editor.planx.uk/.eslintcache
 .env.prod
 .env.temp
 api.planx.uk/.env.test
+editor.planx.uk/.env
 hasura.planx.uk/.env.test
 
 # IDE

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -112,41 +112,42 @@ services:
       timeout: 3s
       retries: 5
     environment:
-      APP_ENVIRONMENT: ${APP_ENVIRONMENT}
-      HASURA_GRAPHQL_ADMIN_SECRET: ${HASURA_GRAPHQL_ADMIN_SECRET}
-      HASURA_GRAPHQL_URL: http://hasura-proxy:${HASURA_PROXY_PORT}/v1/graphql
-      HASURA_METADATA_URL: http://hasura-proxy:${HASURA_PROXY_PORT}/v1/metadata
-      HASURA_SCHEMA_URL: http://hasura-proxy:${HASURA_PROXY_PORT}/v2/query
-      JWT_SECRET: ${JWT_SECRET}
-      GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
-      GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET}
+      AIRBRAKE_PROJECT_ID: ${AIRBRAKE_PROJECT_ID}
+      AIRBRAKE_PROJECT_KEY: ${AIRBRAKE_PROJECT_KEY}
       API_URL_EXT: ${API_URL_EXT}
-      EDITOR_URL_EXT: ${EDITOR_URL_EXT}
-      SESSION_SECRET: ${SESSION_SECRET}
-      AWS_S3_REGION: ${AWS_S3_REGION}
+      APP_ENVIRONMENT: ${APP_ENVIRONMENT}
       AWS_ACCESS_KEY: ${AWS_ACCESS_KEY}
-      AWS_SECRET_KEY: ${AWS_SECRET_KEY}
-      AWS_S3_BUCKET: ${AWS_S3_BUCKET}
       AWS_S3_ACL: ${AWS_S3_ACL}
-      PORT: ${API_PORT}
+      AWS_S3_BUCKET: ${AWS_S3_BUCKET}
+      AWS_S3_REGION: ${AWS_S3_REGION}
+      AWS_SECRET_KEY: ${AWS_SECRET_KEY}
       BOPS_API_TOKEN: ${BOPS_API_TOKEN}
-      AIRBRAKE_PROJECT_ID: ${AIRBRAKE_PROJECT_ID}
-      AIRBRAKE_PROJECT_KEY: ${AIRBRAKE_PROJECT_KEY}
-      UNIFORM_TOKEN_URL: ${UNIFORM_TOKEN_URL}
-      UNIFORM_SUBMISSION_URL: ${UNIFORM_SUBMISSION_URL}
-      GOVUK_NOTIFY_API_KEY: ${GOVUK_NOTIFY_API_KEY}
-      HASURA_PLANX_API_KEY: ${HASURA_PLANX_API_KEY}
-      FILE_API_KEY: ${FILE_API_KEY}
-      FILE_API_KEY_NEXUS: ${FILE_API_KEY_NEXUS}
-      FILE_API_KEY_BARNET: ${FILE_API_KEY_BARNET}
-      SLACK_WEBHOOK_URL: ${SLACK_WEBHOOK_URL}
-      ORDNANCE_SURVEY_API_KEY: ${ORDNANCE_SURVEY_API_KEY}
-      MINIO_PORT: ${MINIO_PORT}
       CORS_ALLOWLIST: ${EDITOR_URL_EXT}, ${API_URL_EXT}
+      EDITOR_URL_EXT: ${EDITOR_URL_EXT}
       ENCRYPTION_KEY: ${ENCRYPTION_KEY}
+      FILE_API_KEY_BARNET: ${FILE_API_KEY_BARNET}
+      FILE_API_KEY_NEXUS: ${FILE_API_KEY_NEXUS}
+      FILE_API_KEY: ${FILE_API_KEY}
+      GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
+      GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET}
+      GOVUK_NOTIFY_API_KEY: ${GOVUK_NOTIFY_API_KEY}
+      HASURA_GRAPHQL_ADMIN_SECRET: ${HASURA_GRAPHQL_ADMIN_SECRET}
+      HASURA_GRAPHQL_URL: http://hasura-proxy:${HASURA_PROXY_PORT}/v1/graphql
+      HASURA_METADATA_URL: http://hasura-proxy:${HASURA_PROXY_PORT}/v1/metadata
+      HASURA_PLANX_API_KEY: ${HASURA_PLANX_API_KEY}
+      HASURA_SCHEMA_URL: http://hasura-proxy:${HASURA_PROXY_PORT}/v2/query
       IDOX_NEXUS_CLIENT: ${IDOX_NEXUS_CLIENT}
-      IDOX_NEXUS_TOKEN_URL: ${IDOX_NEXUS_TOKEN_URL}
       IDOX_NEXUS_SUBMISSION_URL: ${IDOX_NEXUS_SUBMISSION_URL}
+      IDOX_NEXUS_TOKEN_URL: ${IDOX_NEXUS_TOKEN_URL}
+      JWT_SECRET: ${JWT_SECRET}
+      MAPBOX_ACCESS_TOKEN: ${MAPBOX_ACCESS_TOKEN}
+      MINIO_PORT: ${MINIO_PORT}
+      ORDNANCE_SURVEY_API_KEY: ${ORDNANCE_SURVEY_API_KEY}
+      PORT: ${API_PORT}
+      SESSION_SECRET: ${SESSION_SECRET}
+      SLACK_WEBHOOK_URL: ${SLACK_WEBHOOK_URL}
+      UNIFORM_SUBMISSION_URL: ${UNIFORM_SUBMISSION_URL}
+      UNIFORM_TOKEN_URL: ${UNIFORM_TOKEN_URL}
       # Local authority config
       # Lambeth
       UNIFORM_CLIENT_LAMBETH: ${UNIFORM_CLIENT_LAMBETH}

diff --git a/editor.planx.uk/.env b/editor.planx.uk/.env
diff --git a/editor.planx.uk/.env.example b/editor.planx.uk/.env.example
@@ -0,0 +1,15 @@
+# Used in local development and testing, overwritten in .env.production
+# Most values in this file are publicly exposed and not secrets
+VITE_APP_AIRBRAKE_PROJECT_ID=👻
+VITE_APP_AIRBRAKE_PROJECT_KEY=👻
+
+# This token should be exclusively scoped for local development: localhost:3000 (here) & localhost:5173 (@opensystemslab/map)
+# A separate token restricted to our production, staging, and pizza domains is then set via Pulumi and Github Action secrets
+VITE_APP_MAPBOX_ACCESS_TOKEN=👻
+
+VITE_APP_API_URL=http://localhost:7002
+VITE_APP_HASURA_URL=http://localhost:7100/v1/graphql
+VITE_APP_HASURA_WEBSOCKET=ws://localhost:7100/v1/graphql
+VITE_APP_SHAREDB_URL=ws://localhost:7003
+
+VITE_APP_ENV=development
diff --git a/editor.planx.uk/.gitignore b/editor.planx.uk/.gitignore
@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

diff --git a/editor.planx.uk/src/@planx/components/List/schemas/Trees.ts b/editor.planx.uk/src/@planx/components/List/schemas/Trees.ts
@@ -68,8 +68,7 @@ export const Trees: Schema = {
         mapOptions: {
           basemap: "OSVectorTile",
           drawType: "Point",
-          drawColor: "#ff0000",
-          drawMany: true,
+          drawColor: "#66ff00",
         },
       },
     },

diff --git a/editor.planx.uk/src/@planx/components/List/utils.tsx b/editor.planx.uk/src/@planx/components/List/utils.tsx
@@ -39,7 +39,7 @@ export function formatSchemaDisplayValue(
     }
     case "question": {
       const matchingOption = field.data.options.find(
-        (option) => option.data.text === value,
+        (option) => option.data.text === value || option.data.val === value,
       );
       return matchingOption?.data.text;
     }
@@ -56,6 +56,7 @@ export function formatSchemaDisplayValue(
               {/* @ts-ignore */}
               <my-map
                 id="inactive-list-map"
+                basemap={field.data.mapOptions?.basemap}
                 latitude={feature.geometry.coordinates[1]}
                 longitude={feature.geometry.coordinates[0]}
                 zoom={19}
@@ -69,7 +70,12 @@ export function formatSchemaDisplayValue(
                 hideResetControl
                 staticMode
                 style={{ width: "100%", height: "30vh" }}
-                osCopyright={`© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`}
+                osCopyright={
+                  field.data.mapOptions?.basemap === "OSVectorTile"
+                    ? `© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`
+                    : ``
+                }
+                mapboxAccessToken={import.meta.env.VITE_APP_MAPBOX_ACCESS_TOKEN}
                 collapseAttributions
               />
             </>
@@ -80,6 +86,7 @@ export function formatSchemaDisplayValue(
               {/* @ts-ignore */}
               <my-map
                 id="inactive-list-map"
+                basemap={field.data.mapOptions?.basemap}
                 geojsonData={JSON.stringify(feature)}
                 geojsonColor={field.data.mapOptions?.drawColor}
                 geojsonFill
@@ -90,7 +97,12 @@ export function formatSchemaDisplayValue(
                 hideResetControl
                 staticMode
                 style={{ width: "100%", height: "30vh" }}
-                osCopyright={`© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`}
+                osCopyright={
+                  field.data.mapOptions?.basemap === "OSVectorTile"
+                    ? `© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`
+                    : ``
+                }
+                mapboxAccessToken={import.meta.env.VITE_APP_MAPBOX_ACCESS_TOKEN}
                 collapseAttributions
               />
             </>

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Editor.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Editor.tsx
@@ -1,7 +1,7 @@
+import Box from "@mui/material/Box";
 import FormControl from "@mui/material/FormControl";
 import MenuItem from "@mui/material/MenuItem";
 import RadioGroup from "@mui/material/RadioGroup";
-import { useTheme } from "@mui/material/styles";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { useFormik } from "formik";
 import React from "react";
@@ -28,8 +28,6 @@ export const SCHEMAS = [{ name: "Trees", schema: Trees }];
 export default MapAndLabelComponent;
 
 function MapAndLabelComponent(props: Props) {
-  const theme = useTheme();
-
   const formik = useFormik({
     initialValues: parseContent(props.node?.data),
     onSubmit: (newValues) => {
@@ -78,8 +76,68 @@ function MapAndLabelComponent(props: Props) {
             </InputRow>
           </InputGroup>
         </ModalSectionContent>
-        <ModalSectionContent title="Map formatting">
+        <ModalSectionContent title="Map options">
           <InputGroup>
+            <Box mb={2}>
+              <FormControl component="fieldset">
+                <InputLabel label="Basemap">
+                  <RadioGroup
+                    defaultValue="OSVectorTile"
+                    value={formik.values.basemap}
+                  >
+                    {[
+                      {
+                        id: "OSVectorTile",
+                        title: "Ordnance Survey Vector Tiles",
+                      },
+                      {
+                        id: "MapboxSatellite",
+                        title: "Mapbox Satellite imagery",
+                      },
+                    ].map((type) => (
+                      <BasicRadio
+                        key={type.id}
+                        id={type.id}
+                        title={type.title}
+                        variant="compact"
+                        value={type.id}
+                        onChange={(e: React.SyntheticEvent<Element, Event>) => {
+                          const target = e?.target as HTMLInputElement;
+                          formik.setFieldValue("basemap", target.value);
+                        }}
+                      />
+                    ))}
+                  </RadioGroup>
+                </InputLabel>
+              </FormControl>
+            </Box>
+            <Box mb={2}>
+              <FormControl component="fieldset">
+                <InputLabel label="Drawing type">
+                  <RadioGroup
+                    defaultValue="Polygon"
+                    value={formik.values.drawType}
+                  >
+                    {[
+                      { id: "Polygon", title: "Polygon" },
+                      { id: "Point", title: "Point" },
+                    ].map((type) => (
+                      <BasicRadio
+                        key={type.id}
+                        id={type.id}
+                        title={type.title}
+                        variant="compact"
+                        value={type.id}
+                        onChange={(e: React.SyntheticEvent<Element, Event>) => {
+                          const target = e?.target as HTMLInputElement;
+                          formik.setFieldValue("drawType", target.value);
+                        }}
+                      />
+                    ))}
+                  </RadioGroup>
+                </InputLabel>
+              </FormControl>
+            </Box>
             <InputRow>
               <InputRowItem>
                 <ColorPicker
@@ -94,30 +152,6 @@ function MapAndLabelComponent(props: Props) {
             </InputRow>
           </InputGroup>
         </ModalSectionContent>
-        <ModalSectionContent>
-          <FormControl component="fieldset">
-            <InputLabel label="Map drawing type">
-              <RadioGroup defaultValue="Polygon" value={formik.values.drawType}>
-                {[
-                  { id: "Polygon", title: "Polygon" },
-                  { id: "Point", title: "Point" },
-                ].map((type) => (
-                  <BasicRadio
-                    key={type.id}
-                    id={type.id}
-                    title={type.title}
-                    variant="compact"
-                    value={type.id}
-                    onChange={(e: React.SyntheticEvent<Element, Event>) => {
-                      const target = e?.target as HTMLInputElement;
-                      formik.setFieldValue("drawType", target.value);
-                    }}
-                  />
-                ))}
-              </RadioGroup>
-            </InputLabel>
-          </FormControl>
-        </ModalSectionContent>
         <ModalSectionContent title="Schema">
           <InputRow>
             <InputRowItem>

diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -76,7 +76,7 @@ const VerticalFeatureTabs: React.FC<{ features: Feature[] }> = ({
             <Typography component="h2" variant="h3">
               {`${schema.type} ${feature.properties?.label}`}
             </Typography>
-            <Typography variant="body2" gutterBottom>
+            <Typography variant="body2" mb={2}>
               {`${feature.geometry.type}`}
               {feature.geometry.type === "Point"
                 ? ` (${feature.geometry.coordinates.map((coord) =>
@@ -106,6 +106,7 @@ const Root = () => {
     info,
     policyRef,
     howMeasured,
+    basemap,
     drawColor,
     drawType,
     schemaName,
@@ -173,6 +174,7 @@ const Root = () => {
           {/* @ts-ignore */}
           <my-map
             id="map-and-label-map"
+            basemap={basemap}
             ariaLabelOlFixedOverlay={`An interactive map for plotting and describing individual ${schemaName.toLocaleLowerCase()}`}
             drawMode
             drawMany
@@ -186,11 +188,17 @@ const Root = () => {
             osProxyEndpoint={`${
               import.meta.env.VITE_APP_API_URL
             }/proxy/ordnance-survey`}
-            osCopyright={`© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`}
+            osCopyright={
+              basemap === "OSVectorTile"
+                ? `© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`
+                : ``
+            }
             clipGeojsonData={
               teamSettings?.boundaryBBox &&
               JSON.stringify(teamSettings?.boundaryBBox)
             }
+            mapboxAccessToken={import.meta.env.VITE_APP_MAPBOX_ACCESS_TOKEN}
+            collapseAttributions
           />
         </MapContainer>
         {features && features?.length > 0 ? (