Production deploy

api.planx.uk/.env.test.example

@@ -25,6 +25,9 @@ EDITOR_URL_EXT=example.com
 HASURA_GRAPHQL_URL=http://hasura:8080/v1/graphql
 HASURA_PLANX_API_KEY=👻
 
+# Minio object storage server port
+MINIO_PORT=1234
+
 # Integrations
 BOPS_API_TOKEN=👻
 BOPS_API_TOKEN=👻

api.planx.uk/jest.setup.js

@@ -1,7 +1,10 @@
 import dotenv from "dotenv";
 import { queryMock } from "./tests/graphqlQueryMock";
 
-dotenv.config({ path: "./.env.test" });
+dotenv.config({
+  path: "./.env.test",
+  override: true,
+});
 
 beforeEach(() => {
   queryMock.setup(process.env.HASURA_GRAPHQL_URL);

api.planx.uk/modules/file/service/utils.test.ts

@@ -12,7 +12,7 @@ describe("s3 Factory", () => {
   });
 
   it("returns Minio config for local development", () => {
-    expect(s3Factory()).toHaveProperty("endpoint.host", "minio");
+    expect(s3Factory()).toHaveProperty("endpoint.host", "minio:1234");
   });
 
   ["pizza", "staging", "production"].forEach((env) => {

api.planx.uk/modules/gis/service/digitalLand.ts

@@ -5,7 +5,7 @@
 } from "@opensystemslab/planx-core/types";
 import { gql } from "graphql-request";
 import fetch from "isomorphic-fetch";
-import { addDesignatedVariable, omitGeometry } from "./helpers";
+import { addDesignatedVariable } from "./helpers";
 import { baseSchema } from "./local_authorities/metadata/base";
 import { $api } from "../../../client";
 
@@ -68,6 +68,7 @@
     entries: "current",
     geometry: geom,
     geometry_relation: "intersects",
+    exclude_field: "geometry,point",
     limit: "100", // TODO handle pagination in future for large polygons & many datasets, but should be well within this limit now
   };
   // 'dataset' param is not array[string] per docs, instead re-specify param name per unique dataset
@@ -78,8 +79,8 @@
     options,
   )}${datasets}`;
   const res = await fetch(url)
     .then((response: { json: () => any }) => response.json())
     .catch((error: any) => console.log(error));
 
   // if analytics are "on", store an audit record of the raw response
   if (extras?.analytics !== "false") {
@@ -113,21 +114,21 @@
   // check for & add any 'positive' constraints to the formattedResult
   let formattedResult: Record<string, Constraint> = {};
   if (res && res.count > 0 && res.entities) {
     res.entities.forEach((entity: { dataset: any }) => {
       // get the planx variable that corresponds to this entity's 'dataset', should never be null because our initial request is filtered on 'dataset'
       const key = Object.keys(baseSchema).find((key) =>
         baseSchema[key]["digital-land-datasets"]?.includes(entity.dataset),
       );
       // because there can be many digital land datasets per planx variable, check if this key is already in our result
       if (key && Object.keys(formattedResult).includes(key)) {
-        formattedResult[key]["data"]?.push(omitGeometry(entity));
+        formattedResult[key]["data"]?.push(entity);
       } else {
         if (key) {
           formattedResult[key] = {
             fn: key,
             value: true,
             text: baseSchema[key].pos,
-            data: [omitGeometry(entity)],
+            data: [entity],
             category: baseSchema[key].category,
           };
         }

api.planx.uk/modules/gis/service/helpers.js

@@ -197,16 +197,6 @@ const getA4Subvariables = (features, articleFours, a4Key) => {
   return result;
 };
 
-// Filter a Digital Land entity response object, omitting the "geometry" & "point" keys if exists
-const omitGeometry = (entity) => {
-  return Object.keys(entity)
-    .filter((key) => !["geometry", "point"].includes(key))
-    .reduce((obj, key) => {
-      obj[key] = entity[key];
-      return obj;
-    }, {});
-};
-
 export {
   setEsriGeometryType,
   setEsriGeometry,
@@ -219,6 +209,5 @@ export {
   squashResultLayers,
   rollupResultLayers,
   getA4Subvariables,
-  omitGeometry,
   addDesignatedVariable,
 };

e2e/tests/ui-driven/src/pay.spec.ts

@@ -1,4 +1,4 @@
 import { test, expect } from "@playwright/test";
 import {
   cards,
   fillGovUkCardDetails,
@@ -313,10 +313,16 @@
     await expect(page.getByText("Application sent")).toBeVisible();
     await expect(page.getByText(actualPaymentId)).toBeVisible();
 
-    // try going back to the payment page
+    // Try going back to the GovPay payment page
     await page.goBack();
+    // Unable to make another payment - just get a status page...
     await expect(
-      page.locator("h1").getByText("Your payment session has expired"),
+      page.locator("h1").getByText("Your payment was successful"),
+    ).toBeVisible();
+    // ...with a link back to PlanX
+    await page.locator("a").getByText("View your payment summary").click();
+    await expect(
+      page.locator("h1").getByText("Application sent"),
     ).toBeVisible();
   });
 });

editor.planx.uk/src/@planx/components/MapAndLabel/Public.tsx

@@ -1,42 +1,112 @@
 import { alpha } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import { Feature } from "geojson";
 import { useStore } from "pages/FlowEditor/lib/store";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { FONT_WEIGHT_SEMI_BOLD } from "theme";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
 
 import Card from "../shared/Preview/Card";
 import CardHeader from "../shared/Preview/CardHeader";
-import { MapContainer } from "../shared/Preview/MapContainer";
+import { MapContainer, MapFooter } from "../shared/Preview/MapContainer";
 import { PublicProps } from "../ui";
 import { MapAndLabel } from "./model";
 
 type Props = PublicProps<MapAndLabel>;
 
+type Boundary = Feature | undefined;
+
 function MapAndLabelComponent(props: Props) {
   const teamSettings = useStore.getState().teamSettings;
+  const [boundary, setBoundary] = useState<Boundary>();
+  const [area, setArea] = useState<number | undefined>(0);
+  const [objectArray, setObjectArray] = useState<any>([]);
+  const [mapValidationError, setMapValidationError] = useState<string>();
+
+  let count = 0;
+
+  useEffect(() => {
+    const areaChangeHandler = ({ detail }: { detail: string }) => {
+      const numberString = detail.split(" ")[0];
+      const area = Number(numberString);
+      setArea(area);
+    };
+
+    const geojsonChangeHandler = ({ detail: geojson }: any) => {
+      if (geojson["EPSG:3857"]?.features) {
+        count++;
+
+        // only a single polygon can be drawn, so get first feature in geojson "FeatureCollection"
+        setBoundary(geojson["EPSG:3857"].features[0]);
+        setObjectArray([
+          ...objectArray,
+          { number: count, feature: geojson["EPSG:3857"].features[0] },
+        ]);
+      } else {
+        // if the user clicks 'reset' to erase the drawing, geojson will be empty object, so set boundary to undefined
+        setBoundary(undefined);
+      }
+    };
+
+    const map: any = document.getElementById("draw-boundary-map");
+
+    map?.addEventListener("areaChange", areaChangeHandler);
+    map?.addEventListener("geojsonChange", geojsonChangeHandler);
+
+    return function cleanup() {
+      map?.removeEventListener("areaChange", areaChangeHandler);
+      map?.removeEventListener("geojsonChange", geojsonChangeHandler);
+    };
+  }, [objectArray, boundary]);
+
+  useEffect(() => {
+    if (!boundary && objectArray.length < 1) {
+      setMapValidationError("Add a boundary to the map");
+    }
+  }, [boundary]);
+
   return (
-    <Card handleSubmit={props.handleSubmit} isValid>
+    <Card handleSubmit={props.handleSubmit} isValid={!mapValidationError}>
       <CardHeader
         title={props.title}
         description={props.description}
         info={props.info}
         policyRef={props.policyRef}
         howMeasured={props.howMeasured}
       />
-      <MapContainer environment="standalone">
-        {/* @ts-ignore */}
-        <my-map
-          drawMode
-          drawPointer="crosshair"
-          zoom={16}
-          drawFillColor={alpha(props.drawColor, 0.1)}
-          drawColor={props.drawColor}
-          drawPointColor={props.drawColor}
-          drawType={props.drawType}
-          clipGeojsonData={
-            teamSettings?.boundaryBBox &&
-            JSON.stringify(teamSettings?.boundaryBBox)
-          }
-        />
-      </MapContainer>
+      <ErrorWrapper error={mapValidationError} id="draw-boundary-map">
+        <MapContainer environment="standalone">
+          {/* @ts-ignore */}
+          <my-map
+            id="draw-boundary-map"
+            drawMode
+            drawPointer="crosshair"
+            drawGeojsonData={JSON.stringify(boundary)}
+            zoom={16}
+            drawFillColor={alpha(props.drawColor, 0.1)}
+            drawColor={props.drawColor}
+            drawPointColor={props.drawColor}
+            drawType={props.drawType}
+            clipGeojsonData={
+              teamSettings?.boundaryBBox &&
+              JSON.stringify(teamSettings?.boundaryBBox)
+            }
+          />
+
+          <MapFooter>
+            <Typography variant="body1">
+              The property boundary you have drawn is{" "}
+              <Typography
+                component="span"
+                noWrap
+                sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD }}
+              >
+                {area?.toLocaleString("en-GB") ?? 0} m²
+              </Typography>
+            </Typography>
+          </MapFooter>
+        </MapContainer>
+      </ErrorWrapper>
     </Card>
   );
 }

editor.planx.uk/src/pages/FlowEditor/components/Team/MembersTable.tsx

@@ -0,0 +1,86 @@
+import Chip from "@mui/material/Chip";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import React from "react";
+
+import { StyledAvatar, StyledTableRow } from "./styles";
+import { TeamMember } from "./types";
+
+export const MembersTable: React.FC<{ members: TeamMember[] }> = ({
+  members,
+}) => {
+  const roleLabels: Record<string, string> = {
+    platformAdmin: "Admin",
+    teamEditor: "Editor",
+    teamViewer: "Viewer",
+  };
+
+  const getRoleLabel = (role: string) => {
+    return roleLabels[role] || role;
+  };
+
+  if (members.length === 0) {
+    return (
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>
+              <strong>No members found</strong>
+            </TableCell>
+          </TableRow>
+        </TableHead>
+      </Table>
+    );
+  }
+
+  return (
+    <TableContainer>
+      <Table>
+        <TableHead>
+          <StyledTableRow>
+            <TableCell sx={{ width: 300 }}>
+              <strong>User</strong>
+            </TableCell>
+            <TableCell sx={{ width: 200 }}>
+              <strong>Role</strong>
+            </TableCell>
+            <TableCell>
+              <strong>Email</strong>
+            </TableCell>
+          </StyledTableRow>
+        </TableHead>
+        <TableBody>
+          {members.map((member) => (
+            <StyledTableRow key={member.id}>
+              <TableCell
+                sx={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                }}
+              >
+                <StyledAvatar>
+                  {member.firstName[0]}
+                  {member.lastName[0]}
+                </StyledAvatar>
+                {member.firstName} {member.lastName}
+              </TableCell>
+              <TableCell>
+                <Chip
+                  label={getRoleLabel(member.role)}
+                  size="small"
+                  sx={{ background: "#ddd" }}
+                />
+              </TableCell>
+              <TableCell>{member.email}</TableCell>
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};