Merge branch 'main' of github.com:theopensystemslab/planx-new into je…

…ss/setup-satellite-basemap-selection

editor.planx.uk/src/@planx/components/List/Public/index.tsx

@@ -105,7 +105,9 @@ const InactiveListCard: React.FC<{
         <TableBody>
           {schema.fields.map((field, j) => (
             <TableRow key={`tableRow-${j}`}>
-              <TableCell sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD }}>
+              <TableCell
+                sx={{ fontWeight: FONT_WEIGHT_SEMI_BOLD, maxWidth: "100px" }}
+              >
                 {field.data.title}
               </TableCell>
               <TableCell>

editor.planx.uk/src/@planx/components/List/utils.tsx

@@ -43,6 +43,60 @@ export function formatSchemaDisplayValue(
       );
       return matchingOption?.data.text;
     }
+    case "map": {
+      const feature = value[0] as string as any; // won't be necessary to cast once we're only setting "geojsonData" prop in future
+      const drawType = field.data.mapOptions?.drawType;
+
+      switch (drawType) {
+        case "Point":
+          // Our "geojsonData" layer doesn't have a "point" style yet, so make due with center marker for now!
+          //   Once style layers are more comprehensive, share same map as "Polygon" style here
+          return (
+            <>
+              {/* @ts-ignore */}
+              <my-map
+                id="inactive-list-map"
+                latitude={feature.geometry.coordinates[1]}
+                longitude={feature.geometry.coordinates[0]}
+                zoom={19}
+                showCentreMarker
+                markerLatitude={feature.geometry.coordinates[1]}
+                markerLongitude={feature.geometry.coordinates[0]}
+                markerColor={field.data.mapOptions?.drawColor}
+                osProxyEndpoint={`${
+                  import.meta.env.VITE_APP_API_URL
+                }/proxy/ordnance-survey`}
+                hideResetControl
+                staticMode
+                style={{ width: "100%", height: "30vh" }}
+                osCopyright={`© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`}
+                collapseAttributions
+              />
+            </>
+          );
+        case "Polygon":
+          return (
+            <>
+              {/* @ts-ignore */}
+              <my-map
+                id="inactive-list-map"
+                geojsonData={JSON.stringify(feature)}
+                geojsonColor={field.data.mapOptions?.drawColor}
+                geojsonFill
+                geojsonBuffer={20}
+                osProxyEndpoint={`${
+                  import.meta.env.VITE_APP_API_URL
+                }/proxy/ordnance-survey`}
+                hideResetControl
+                staticMode
+                style={{ width: "100%", height: "30vh" }}
+                osCopyright={`© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`}
+                collapseAttributions
+              />
+            </>
+          );
+      }
+    }
   }
 }
 

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/Headline.tsx

@@ -8,7 +8,7 @@ interface Props {
   variant: "data";
 }
 
-export const Headline: React.FC<Props> = ({ text, matchIndices }) => {
+export const Headline: React.FC<Props> = ({ text, matchIndices, variant }) => {
   const isHighlighted = (index: number) =>
     matchIndices.some(([start, end]) => index >= start && index <= end);
 
@@ -17,7 +17,7 @@ export const Headline: React.FC<Props> = ({ text, matchIndices }) => {
       {text.split("").map((char, index) => (
         <Typography
           component="span"
-          variant="data"
+          variant={variant}
           key={`headline-character-${index}`}
           sx={(theme) => ({
             fontWeight: isHighlighted(index) ? FONT_WEIGHT_BOLD : "regular",

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx

@@ -2,7 +2,6 @@ import LanguageIcon from "@mui/icons-material/Language";
 import MenuOpenIcon from "@mui/icons-material/MenuOpen";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import OpenInNewOffIcon from "@mui/icons-material/OpenInNewOff";
-import RefreshIcon from "@mui/icons-material/Refresh";
 import Badge from "@mui/material/Badge";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
@@ -23,6 +22,7 @@ import { formatLastPublishMessage } from "pages/FlowEditor/utils";
 import React, { useState } from "react";
 import { useAsync } from "react-use";
 import Permission from "ui/editor/Permission";
+import Reset from "ui/icons/Reset";
 import Input from "ui/shared/Input";
 
 import Questions from "../../../Preview/Questions";
@@ -64,6 +64,7 @@ const SidebarContainer = styled(Box)(() => ({
   overflow: "auto",
   flex: 1,
   background: "#fff",
+  position: "relative",
 }));
 
 const Header = styled("header")(({ theme }) => ({
@@ -83,6 +84,15 @@ const Header = styled("header")(({ theme }) => ({
   },
 }));
 
+const ResetToggle = styled(Button)(({ theme }) => ({
+  position: "absolute",
+  top: 0,
+  right: theme.spacing(3),
+  padding: theme.spacing(1, 1, 1, 0),
+  textDecorationStyle: "solid",
+  color: theme.palette.text.primary,
+}));
+
 const TabList = styled(Box)(({ theme }) => ({
   position: "relative",
   // Use a pseudo element as border to allow for tab border overlap without excessive MUI overrides
@@ -175,7 +185,6 @@ const Sidebar: React.FC<{
     state.validateAndDiffFlow,
     state.isFlowPublished,
   ]);
-  const [key, setKey] = useState<boolean>(false);
   const [lastPublishedTitle, setLastPublishedTitle] = useState<string>(
     "This flow is not published yet",
   );
@@ -261,15 +270,6 @@ const Sidebar: React.FC<{
             value={props.url.replace("/published", "/preview")}
           />
 
-          <Tooltip arrow title="Refresh preview">
-            <RefreshIcon
-              onClick={() => {
-                resetPreview();
-                setKey((a) => !a);
-              }}
-            />
-          </Tooltip>
-
           <Tooltip arrow title="Toggle debug console">
             <MenuOpenIcon
               onClick={() => setDebugConsoleVisibility(!showDebugConsole)}
@@ -442,7 +442,16 @@ const Sidebar: React.FC<{
       </TabList>
       {activeTab === "PreviewBrowser" && (
         <SidebarContainer>
-          <Questions previewEnvironment="editor" key={String(key)} />
+          <ResetToggle
+            variant="link"
+            onClick={() => {
+              resetPreview();
+            }}
+          >
+            <Reset fontSize="small" />
+            Restart
+          </ResetToggle>
+          <Questions previewEnvironment="editor" />
         </SidebarContainer>
       )}
       {activeTab === "History" && (

editor.planx.uk/src/pages/Preview/Questions.tsx

@@ -1,6 +1,6 @@
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import Box from "@mui/material/Box";
-import ButtonBase from "@mui/material/ButtonBase";
+import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 import { styled } from "@mui/material/styles";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
@@ -23,23 +23,12 @@ const BackBar = styled(Box)(() => ({
   zIndex: "1000",
 }));
 
-export const BackButton = styled(ButtonBase)(({ theme, hidden }) => ({
+export const BackButton = styled(Button)(({ theme, hidden }) => ({
   visibility: "visible",
   pointerEvents: "auto",
-  display: "flex",
-  cursor: "pointer",
   userSelect: "none",
   alignSelf: "start",
-  fontSize: "inherit",
-  background: "transparent",
-  border: "none",
-  columnGap: theme.spacing(1),
   padding: theme.spacing(1, 1, 1, 0),
-  minHeight: "48px",
-  textDecoration: "underline",
-  "&:hover": {
-    textDecorationThickness: "3px",
-  },
   ...(hidden && {
     visibility: "hidden",
     pointerEvents: "none",
@@ -180,6 +169,7 @@ const Questions = ({ previewEnvironment }: QuestionsProps) => {
       <BackBar hidden={!showBackBar}>
         <Container maxWidth={false}>
           <BackButton
+            variant="link"
             hidden={!showBackButton}
             data-testid="backButton"
             onClick={() => goBack()}

editor.planx.uk/src/theme.ts

@@ -324,6 +324,31 @@ const getThemeOptions = ({
               },
             },
           },
+          {
+            props: { variant: "link" },
+            style: {
+              color: palette.text.primary,
+              boxShadow: "none",
+              padding: 0,
+              width: "auto",
+              fontWeight: "initial",
+              fontSize: "inherit",
+              textDecoration: "underline",
+              textUnderlineOffset: "0.1em",
+              gap: "10px",
+              minHeight: "48px",
+              "&:hover": {
+                textDecoration: "underline",
+                textDecorationThickness: "3px",
+                background: "transparent",
+                boxShadow: "none",
+              },
+              "&:focus": {
+                borderColor: palette.text.primary,
+                borderStyle: "solid",
+              },
+            },
+          },
         ],
         defaultProps: {
           // Removes default box shadow on buttons

editor.planx.uk/src/themeOverrides.d.ts

@@ -76,6 +76,7 @@ declare module "@mui/material/styles/createPalette" {
 declare module "@mui/material/Button" {
   interface ButtonPropsVariantOverrides {
     help: true;
+    link: true;
   }
 
   interface ButtonPropsColorOverrides {

scripts/seed-database/write/team_settings.sql

@@ -11,7 +11,8 @@ CREATE TEMPORARY TABLE sync_team_settings (
   external_planning_site_url text,
   external_planning_site_name text,
   boundary_url text,
-  boundary_bbox jsonb
+  boundary_bbox jsonb,
+  submission_email text
 );
 
 \copy sync_team_settings FROM '/tmp/team_settings.csv' WITH (FORMAT csv, DELIMITER ';');