Production deploy

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

@@ -62,7 +62,7 @@ const OptionEditor: React.FC<{
         {props.value.id ? (
           <input type="hidden" value={props.value.id} readOnly />
         ) : null}
-        <InputRowItem width="50%">
+        <InputRowItem width="200%">
           <Input
             required
             format="bold"
@@ -104,6 +104,7 @@ const OptionEditor: React.FC<{
               },
             });
           }}
+          sx={{ width: { md: "160px" }, maxWidth: "160px" }}
         />
 
         {typeof props.index !== "undefined" &&

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

@@ -44,7 +44,7 @@ const OptionEditor: React.FC<{
       {props.value.id && (
         <input type="hidden" value={props.value.id} readOnly />
       )}
-      <InputRowItem width="100%">
+      <InputRowItem width="200%">
         <Input
           required
           format="bold"

editor.planx.uk/src/airbrake.ts

@@ -9,17 +9,18 @@ export const logger = getErrorLogger();
  */
 function getEnvForAllowedHosts(host: string) {
   switch (host) {
-    case "planningservices.medway.gov.uk":
+    case "planningservices.barnet.gov.uk":
+    case "planningservices.buckinghamshire.gov.uk":
+    case "planningservices.camden.gov.uk":
     case "planningservices.doncaster.gov.uk":
+    case "planningservices.gateshead.gov.uk":
+    case "planningservices.gloucester.gov.uk":
     case "planningservices.lambeth.gov.uk":
+    case "planningservices.medway.gov.uk":
     case "planningservices.southwark.gov.uk":
-    case "planningservices.buckinghamshire.gov.uk":
-    case "planningservices.camden.gov.uk":
     case "planningservices.stalbans.gov.uk":
-    case "planningservices.barnet.gov.uk":
     case "planningservices.tewkesbury.gov.uk":
     case "planningservices.westberks.gov.uk":
-    case "planningservices.gateshead.gov.uk":
     case "editor.planx.uk":
       return "production";
 

editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx

@@ -8,6 +8,7 @@ import Badge from "@mui/material/Badge";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Collapse from "@mui/material/Collapse";
+import Container from "@mui/material/Container";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
@@ -18,13 +19,16 @@ import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import { styled } from "@mui/material/styles";
+import Tab, { tabClasses } from "@mui/material/Tab";
+import Tabs from "@mui/material/Tabs";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { AxiosError } from "axios";
 import formatDistanceToNow from "date-fns/formatDistanceToNow";
 import React, { useState } from "react";
 import { useAsync } from "react-use";
+import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
 import Caret from "ui/icons/Caret";
 import Input from "ui/shared/Input";
 
@@ -37,17 +41,87 @@ const Console = styled(Box)(() => ({
   maxHeight: "50%",
 }));
 
-const PreviewContainer = styled(Box)(() => ({
+const EmbeddedBrowser = styled(Box)(({ theme }) => ({
+  position: "relative",
+  top: "0",
+  right: "0",
+  bottom: "0",
+  width: "500px",
+  display: "flex",
+  flexShrink: 0,
+  flexDirection: "column",
+  borderLeft: `1px solid ${theme.palette.border.main}`,
+  background: theme.palette.background.paper,
+  "& iframe": {
+    flex: "1",
+  },
+}));
+
+const SidebarContainer = styled(Box)(() => ({
   overflow: "auto",
   flex: 1,
   background: "#fff",
 }));
 
-const Header = styled("header")(() => ({
-  display: "flex",
-  flexDirection: "column",
+const Header = styled("header")(({ theme }) => ({
+  padding: theme.spacing(1),
+  "& input": {
+    flex: "1",
+    padding: "5px",
+    marginRight: "5px",
+    background: theme.palette.common.white,
+    border: "1px solid rgba(0, 0, 0, 0.2)",
+  },
+  "& svg": {
+    cursor: "pointer",
+    opacity: "0.7",
+    margin: "6px 4px 1px 4px",
+    fontSize: "1.2rem",
+  },
+}));
+
+const TabList = styled(Box)(({ theme }) => ({
+  position: "relative",
+  // Use a pseudo element as border to allow for tab border overlap without excessive MUI overrides
+  "&::after": {
+    content: "''",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    width: "100%",
+    height: "1px",
+    backgroundColor: theme.palette.border.main,
+  },
+  "& .MuiTabs-root": {
+    minHeight: "0",
+  },
+  // Hide default MUI indicator as we're using custom styling
+  "& .MuiTabs-indicator": {
+    display: "none",
+  },
 }));
 
+const StyledTab = styled(Tab)(({ theme }) => ({
+  position: "relative",
+  zIndex: 1,
+  textTransform: "none",
+  background: "transparent",
+  border: `1px solid transparent`,
+  borderBottomColor: theme.palette.border.main,
+  color: theme.palette.primary.main,
+  fontWeight: "600",
+  minHeight: "36px",
+  margin: theme.spacing(0, 0.5),
+  marginBottom: "-1px",
+  padding: "0.5em",
+  [`&.${tabClasses.selected}`]: {
+    background: theme.palette.background.default,
+    borderColor: theme.palette.border.main,
+    borderBottomColor: theme.palette.common.white,
+    color: theme.palette.text.primary,
+  },
+})) as typeof Tab;
+
 const formatLastPublish = (date: string, user: string) =>
   `Last published ${formatDistanceToNow(new Date(date))} ago by ${user}`;
 
@@ -84,6 +158,8 @@ interface AlteredNode {
   data?: any;
 }
 
+type SideBarTabs = "PreviewBrowser" | "History";
+
 const AlteredNodeListItem = (props: { node: AlteredNode }) => {
   const { node } = props;
   let text, data;
@@ -316,6 +392,11 @@ const PreviewBrowser: React.FC<{
   const [alteredNodes, setAlteredNodes] = useState<AlteredNode[]>();
   const [dialogOpen, setDialogOpen] = useState<boolean>(false);
   const [summary, setSummary] = useState<string>();
+  const [activeTab, setActiveTab] = useState<SideBarTabs>("PreviewBrowser");
+
+  const handleChange = (event: React.SyntheticEvent, newValue: SideBarTabs) => {
+    setActiveTab(newValue);
+  };
 
   const _lastPublishedRequest = useAsync(async () => {
     const date = await lastPublished(flowId);
@@ -335,7 +416,7 @@ const PreviewBrowser: React.FC<{
   const teamSlug = window.location.pathname.split("/")[1];
 
   return (
-    <Box id="embedded-browser">
+    <EmbeddedBrowser id="embedded-browser">
       <Header>
         <Box width="100%" display="flex">
           <input
@@ -545,11 +626,38 @@ const PreviewBrowser: React.FC<{
           </Box>
         </Box>
       </Header>
-      <PreviewContainer>
-        <Questions previewEnvironment="editor" key={String(key)} />
-      </PreviewContainer>
+      <TabList>
+        <Tabs centered onChange={handleChange} value={activeTab} aria-label="">
+          <StyledTab
+            disableFocusRipple
+            disableTouchRipple
+            disableRipple
+            value="PreviewBrowser"
+            label="Preview"
+          />
+          <StyledTab
+            disableFocusRipple
+            disableTouchRipple
+            disableRipple
+            value="History"
+            label="History"
+          />
+        </Tabs>
+      </TabList>
+      {activeTab === "PreviewBrowser" && (
+        <SidebarContainer>
+          <Questions previewEnvironment="editor" key={String(key)} />
+        </SidebarContainer>
+      )}
+      {activeTab === "History" && (
+        <SidebarContainer py={3}>
+          <Container>
+            <FeaturePlaceholder title="Coming soon" />
+          </Container>
+        </SidebarContainer>
+      )}
       {showDebugConsole && <DebugConsole />}
-    </Box>
+    </EmbeddedBrowser>
   );
 });
 

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

@@ -97,6 +97,8 @@ const Root = styled(Box)(({ theme }) => ({
   left: 0,
   right: 0,
   minHeight: `calc(100% - ${HEADER_HEIGHT}px)`,
+  // Ensure settings panels sit above editor content with explicit z-index set, will be redundent when we move to side-tabbed settings
+  zIndex: theme.zIndex.appBar,
   [`& .${classes.tabs}`]: {
     backgroundColor: theme.palette.border.main,
   },
@@ -105,7 +107,6 @@ const Root = styled(Box)(({ theme }) => ({
     backgroundColor: "#f2f2f2",
     zIndex: 0,
   },
-  zIndex: theme.zIndex.appBar,
 }));
 
 const Settings: React.FC<SettingsProps> = ({ currentTab, tabs }) => {

editor.planx.uk/src/pages/FlowEditor/floweditor.scss

@@ -37,39 +37,6 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
   overflow: hidden;
 }
 
-#embedded-browser {
-  position: relative;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 500px;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  border-left: 1px solid #ccc;
-  header {
-    input {
-      flex: 1;
-      padding: 5px;
-      margin-right: 5px;
-      background: white;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-    }
-    svg {
-      cursor: pointer;
-      opacity: 0.7;
-      margin: 6px 4px 1px 4px;
-      font-size: 1.2rem;
-    }
-    display: flex;
-    background: #ddd;
-    padding: 10px;
-  }
-  iframe {
-    flex: 1;
-  }
-}
-
 #editor {
   flex: 1;
   overflow: auto;

editor.planx.uk/src/routes/utils.ts

@@ -49,17 +49,18 @@ export const setPath = (flowData: Store.flow, req: NaviRequest) => {
 //      So I've hard-coded these domain names until a better solution comes along.
 //
 const PREVIEW_ONLY_DOMAINS = [
+  "planningservices.barnet.gov.uk",
   "planningservices.buckinghamshire.gov.uk",
-  "planningservices.lambeth.gov.uk",
-  "planningservices.southwark.gov.uk",
+  "planningservices.camden.gov.uk",
   "planningservices.doncaster.gov.uk",
+  "planningservices.gateshead.gov.uk",
+  "planningservices.gloucester.gov.uk",
+  "planningservices.lambeth.gov.uk",
   "planningservices.medway.gov.uk",
-  "planningservices.camden.gov.uk",
+  "planningservices.southwark.gov.uk",
   "planningservices.stalbans.gov.uk",
-  "planningservices.barnet.gov.uk",
   "planningservices.tewkesbury.gov.uk",
   "planningservices.westberks.gov.uk",
-  "planningservices.gateshead.gov.uk",
   // XXX: un-comment the next line to test custom domains locally
   // "localhost",
 ];