Production deploy

api.planx.uk/modules/ordnanceSurvey/controller.ts

@@ -4,37 +4,16 @@ import { IncomingMessage } from "http";
 
 export const OS_DOMAIN = "https://api.os.uk";
 
-const MAP_ALLOWLIST: RegExp[] = [
-  // Local development
-  /^http:\/\/(127\.0\.0\.1|localhost):(3000|5173|6006|7007)\/$/i,
-  // Documentation
-  /^https:\/\/.*\.netlify\.app\/$/i,
-  // PlanX
-  /^https:\/\/.*planx\.(pizza|dev|uk)\/$/i,
-  // Custom domains
-  /^https:\/\/.*(\.gov\.uk\/)$/i,
-];
-
 export const useOrdnanceSurveyProxy = async (
   req: Request,
   res: Response,
   next: NextFunction,
-) => {
-  if (!isValid(req))
-    return next({
-      status: 401,
-      message: "Unauthorised",
-    });
-
-  return useProxy({
+) =>
+  useProxy({
     target: OS_DOMAIN,
     onProxyRes: (proxyRes) => setCORPHeaders(proxyRes),
     pathRewrite: (fullPath, req) => appendAPIKey(fullPath, req),
   })(req, res, next);
-};
-
-const isValid = (req: Request): boolean =>
-  MAP_ALLOWLIST.some((re) => re.test(req.headers?.referer as string));
 
 const setCORPHeaders = (proxyRes: IncomingMessage): void => {
   proxyRes.headers["Cross-Origin-Resource-Policy"] = "cross-origin";

api.planx.uk/modules/ordnanceSurvey/ordnanceSurvey.test.ts

@@ -17,7 +17,6 @@ describe("Ordnance Survey proxy endpoint", () => {
       .reply(200, { test: "returned tile" });
 
     await get(ENDPOINT + TILE_PATH)
-      .set({ referer: "https://123.planx.pizza/" })
       .expect(200)
       .then((response) => {
         expect(response.body).toEqual({
@@ -33,7 +32,6 @@ describe("Ordnance Survey proxy endpoint", () => {
       .reply(200, { test: "returned tile" });
 
     await get(ENDPOINT + TILE_PATH + "?srs=3857")
-      .set({ referer: "https://www.planx.dev/" })
       .expect(200)
       .then((response) => {
         expect(response.body).toEqual({
@@ -49,84 +47,13 @@ describe("Ordnance Survey proxy endpoint", () => {
       .reply(401, { test: "failed request" });
 
     await get(ENDPOINT + TILE_PATH)
-      .set({ referer: "https://www.planx.uk/" })
       .expect(401)
       .then((response) => {
         expect(response.body).toEqual({
           test: "failed request",
         });
       });
   });
-
-  describe("CORS functionality", () => {
-    it("blocks requests which are not from a valid referrer", async () => {
-      await get(ENDPOINT + TILE_PATH)
-        .set({ referer: "https://www.invalid-site.com/" })
-        .expect(401)
-        .then((response) => {
-          expect(response.body).toEqual({
-            error: "Unauthorised",
-          });
-        });
-    });
-
-    it("allows requests from allow-listed URLs", async () => {
-      nock(OS_DOMAIN)
-        .get(TILE_PATH)
-        .query({ key: process.env.ORDNANCE_SURVEY_API_KEY })
-        .reply(200, { test: "returned tile" });
-
-      await get(ENDPOINT + TILE_PATH)
-        .set({ referer: "https://oslmap.netlify.app/" })
-        .expect(200)
-        .then((response) => {
-          expect(response.body).toEqual({
-            test: "returned tile",
-          });
-          expect(response.headers["cross-origin-resource-policy"]).toEqual(
-            "cross-origin",
-          );
-        });
-    });
-
-    it("allows requests from PlanX", async () => {
-      nock(OS_DOMAIN)
-        .get(TILE_PATH)
-        .query({ key: process.env.ORDNANCE_SURVEY_API_KEY })
-        .reply(200, { test: "returned tile" });
-
-      await get(ENDPOINT + TILE_PATH)
-        .set({ referer: "https://www.planx.dev/" })
-        .expect(200)
-        .then((response) => {
-          expect(response.body).toEqual({
-            test: "returned tile",
-          });
-          expect(response.headers["cross-origin-resource-policy"]).toEqual(
-            "cross-origin",
-          );
-        });
-    });
-
-    it("allows requests from custom domains", async () => {
-      nock(OS_DOMAIN)
-        .get(TILE_PATH)
-        .query({ key: process.env.ORDNANCE_SURVEY_API_KEY })
-        .reply(200, { test: "returned tile" });
-
-      await get(ENDPOINT + TILE_PATH)
-        .set({ referer: "https://planningservices.buckinghamshire.gov.uk/" })
-        .expect(200)
-        .then((response) => {
-          expect(response.body).toEqual({
-            test: "returned tile",
-          });
-          expect(response.headers["cross-origin-resource-policy"]).toEqual(
-            "cross-origin",
-          );
-        });
-    });
-  });
 });
 
 describe("appendAPIKey helper function", () => {

api.planx.uk/server.ts

@@ -39,14 +39,20 @@ useSwaggerDocs(app);
 app.set("trust proxy", 1);
 
 const checkAllowedOrigins: CorsOptions["origin"] = (origin, callback) => {
+  if (!origin) return callback(null, true);
+
   const isTest = process.env.NODE_ENV === "test";
-  const isDevelopment = process.env.APP_ENVIRONMENT === "development";
+  const localDevEnvs =
+    /^http:\/\/(127\.0\.0\.1|localhost):(3000|5173|6006|7007)$/;
+  const isDevelopment =
+    process.env.APP_ENVIRONMENT === "development" || localDevEnvs.test(origin);
   const allowList = process.env.CORS_ALLOWLIST?.split(", ") || [];
-  const isAllowed = Boolean(origin && allowList.includes(origin));
+  const isAllowed = Boolean(allowList.includes(origin));
+  const isMapDocs = Boolean(origin.endsWith("oslmap.netlify.app"));
 
-  !origin || isTest || isDevelopment || isAllowed
+  isTest || isDevelopment || isAllowed || isMapDocs
     ? callback(null, true)
-    : callback(new Error("Not allowed by CORS"));
+    : callback(new Error(`Not allowed by CORS. Origin: ${origin}`));
 };
 
 app.use(

e2e/tests/ui-driven/src/globalHelpers.ts

@@ -139,7 +139,7 @@ export async function clickContinue({
 
 export async function clickBack({ page }: { page: Page }) {
   const waitPromise = waitForDebugLog(page); // assume debug message is triggered on state transition
-  await page.getByRole("button", { name: "Back", exact: true }).click();
+  await page.getByTestId("backButton").click();
   await waitPromise;
 }
 
@@ -193,7 +193,7 @@ export async function answerChecklist({
   });
   await expect(checklist).toBeVisible();
   for (const answer of answers) {
-    await page.locator("label", { hasText: answer }).click();
+    await page.getByLabel(answer, { exact: true }).click();
   }
 }
 

editor.planx.uk/public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" id="favicon"/>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

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

@@ -20,9 +20,9 @@ const Content = styled(Box, {
       theme.palette.text.primary,
     ])?.toHexString() || theme.palette.text.primary,
   "& a": {
-    color: getContrastTextColor(color || "#fff", theme.palette.primary.main),
+    color: getContrastTextColor(color || "#fff", theme.palette.link.main),
   },
-  "& *:first-child": {
+  "& *:nth-child(1)": {
     marginTop: 0,
   },
 }));

editor.planx.uk/src/@planx/components/FileUploadAndLabel/Modal.tsx

@@ -115,6 +115,7 @@ export const FileTaggingModal = ({
           <Box>
             <Button
               variant="contained"
+              color="prompt"
               onClick={handleValidation}
               data-testid="modal-done-button"
             >
@@ -202,7 +203,7 @@ const SelectMultiple = (props: SelectMultipleProps) => {
         sx={{
           top: "16%",
           textDecoration: "underline",
-          color: (theme) => theme.palette.primary.main,
+          color: (theme) => theme.palette.link.main,
           "&[data-shrink=true]": {
             textDecoration: "none",
             color: (theme) => theme.palette.text.primary,
@@ -284,6 +285,7 @@ const SelectMultiple = (props: SelectMultipleProps) => {
             </Typography>
             <Button
               variant="contained"
+              color="prompt"
               onClick={handleClose}
               aria-label="Close list"
             >

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

@@ -66,7 +66,6 @@ export const InfoButton = styled(Button)(({ theme }) => ({
   minWidth: 0,
   marginLeft: theme.spacing(1.5),
   boxShadow: "none",
-  color: theme.palette.primary.main,
   minHeight: "44px",
 })) as typeof Button;
 

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

@@ -29,10 +29,14 @@ const Container = styled(Box, {
     justifyContent: "space-between",
     padding: theme.spacing(2),
     backgroundColor: customColor,
-    color: mostReadable(customColor, [
-      "#fff",
-      theme.palette.text.primary,
-    ])?.toHexString(),
+    color:
+      mostReadable(customColor || "#fff", [
+        "#fff",
+        theme.palette.text.primary,
+      ])?.toHexString() || theme.palette.text.primary,
+    "& a": {
+      color: "inherit !important",
+    },
     "&:before": {
       content: "' '",
       position: "absolute",

editor.planx.uk/src/@planx/components/Send/Editor.tsx

@@ -78,19 +78,27 @@ const SendComponent: React.FC<Props> = (props) => {
     //   Don't actually restrict selection because flowSlug matching is imperfect for some valid test cases
     const flowSlug = window.location.pathname?.split("/")?.[1];
     if (
-      value === Destination.BOPS && 
+      value === Destination.BOPS &&
       newCheckedValues.includes(value) &&
-      !["apply-for-a-lawful-development-certificate", "apply-for-prior-approval", "apply-for-planning-permission"].includes(flowSlug)
+      ![
+        "apply-for-a-lawful-development-certificate",
+        "apply-for-prior-approval",
+        "apply-for-planning-permission",
+      ].includes(flowSlug)
     ) {
-      alert("BOPS only accepts Lawful Development Certificate, Prior Approval, and Planning Permission submissions. Please do not select if you're building another type of submission service!");
+      alert(
+        "BOPS only accepts Lawful Development Certificate, Prior Approval, and Planning Permission submissions. Please do not select if you're building another type of submission service!",
+      );
     }
-    
+
     if (
       value === Destination.Uniform &&
-      newCheckedValues.includes(value) && 
+      newCheckedValues.includes(value) &&
       flowSlug !== "apply-for-a-lawful-development-certificate"
     ) {
-      alert("Uniform only accepts Lawful Development Certificate submissions. Please do not select if you're building another type of submission service!");
+      alert(
+        "Uniform only accepts Lawful Development Certificate submissions. Please do not select if you're building another type of submission service!",
+      );
     }
   };
 
@@ -128,8 +136,9 @@ const SendComponent: React.FC<Props> = (props) => {
           <Box display="flex" mt={2}>
             <Warning titleAccess="Warning" color="primary" fontSize="large" />
             <Typography variant="body2" ml={1}>
-              API tokens may be required to submit successfully. Check in with PlanX developers before launching your
-              service to make sure that submissions are configured for your environment.
+              API tokens may be required to submit successfully. Check in with
+              PlanX developers before launching your service to make sure that
+              submissions are configured for your environment.
             </Typography>
           </Box>
         </ModalSectionContent>

editor.planx.uk/src/@planx/components/shared/Preview/Card.tsx

@@ -83,7 +83,7 @@ const Card: React.FC<Props> = ({
             {handleSubmit && (
               <Button
                 variant="contained"
-                color="primary"
+                color="prompt"
                 size="large"
                 type="submit"
                 disabled={!isValid}

editor.planx.uk/src/@planx/components/shared/Preview/MoreInfo.tsx

@@ -1,8 +1,11 @@
 import CloseIcon from "@mui/icons-material/Close";
+import Box from "@mui/material/Box";
 import Container from "@mui/material/Container";
 import Drawer, { DrawerProps } from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
 import { styled } from "@mui/material/styles";
+import MoreInfoFeedbackComponent from "components/MoreInfoFeedback";
+import { hasFeatureFlag } from "lib/featureFlags";
 import React from "react";
 
 const PREFIX = "MoreInfo";
@@ -34,22 +37,22 @@ const Root = styled(Drawer, {
   [`& .${classes.drawerPaper}`]: {
     width: "100%",
     maxWidth: drawerWidth,
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.palette.background.paper,
     border: 0,
     boxShadow: "-4px 0 0 rgba(0,0,0,0.1)",
   },
 }));
 
-const DrawerContent = styled("div")(({ theme }) => ({
-  padding: theme.spacing(2.5, 4, 6, 0),
+const DrawerContent = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(2.5, 4, 2, 0),
   fontSize: "1rem",
   lineHeight: "1.5",
   [theme.breakpoints.up("sm")]: {
-    padding: theme.spacing(6, 4, 6, 1),
+    padding: theme.spacing(6, 4, 4, 1),
   },
 }));
 
-const CloseButton = styled("div")(({ theme }) => ({
+const CloseButton = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "flex-end",
@@ -59,6 +62,8 @@ const CloseButton = styled("div")(({ theme }) => ({
   color: theme.palette.text.primary,
 }));
 
+const isUsingFeatureFlag = hasFeatureFlag("SHOW_INTERNAL_FEEDBACK");
+
 interface IMoreInfo {
   open: boolean;
   children: (JSX.Element | string | undefined)[] | JSX.Element;
@@ -90,9 +95,10 @@ const MoreInfo: React.FC<IMoreInfo> = ({ open, children, handleClose }) => (
         <CloseIcon />
       </IconButton>
     </CloseButton>
-    <Container maxWidth={false} role="main">
+    <Container maxWidth={false} role="main" sx={{ bgcolor: "white" }}>
       <DrawerContent>{children}</DrawerContent>
     </Container>
+    {isUsingFeatureFlag && <MoreInfoFeedbackComponent />}
   </Root>
 );
 

editor.planx.uk/src/@planx/components/shared/PrivateFileUpload/Dropzone.tsx

@@ -22,7 +22,7 @@ interface RootProps extends ButtonBaseProps {
 }
 
 const FauxLink = styled(Box)(({ theme }) => ({
-  color: theme.palette.primary.main,
+  color: theme.palette.link.main,
   textDecoration: "underline",
   whiteSpace: "nowrap",
 }));