From 19d23ecd41af7d568b15a14e7e25f35ea97fba21 Mon Sep 17 00:00:00 2001 From: Ian Jones <51156018+ianjon3s@users.noreply.github.com> Date: Tue, 23 Apr 2024 16:21:02 +0100 Subject: [PATCH 1/4] feat: Tab styling for editor browser preview / history (#3020) --- .../FlowEditor/components/PreviewBrowser.tsx | 116 ++++++++++++++++-- .../FlowEditor/components/Settings/index.tsx | 3 +- .../src/pages/FlowEditor/floweditor.scss | 33 ----- 3 files changed, 109 insertions(+), 43 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx b/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx index d7992f674f..e0b01cfce5 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx +++ b/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,6 +19,8 @@ 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"; @@ -37,17 +40,90 @@ 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 +160,8 @@ interface AlteredNode { data?: any; } +type SideBarTabs = "PreviewBrowser" | "History" + const AlteredNodeListItem = (props: { node: AlteredNode }) => { const { node } = props; let text, data; @@ -316,6 +394,11 @@ const PreviewBrowser: React.FC<{ const [alteredNodes, setAlteredNodes] = useState(); const [dialogOpen, setDialogOpen] = useState(false); const [summary, setSummary] = useState(); + const [activeTab, setActiveTab] = useState("PreviewBrowser"); + + const handleChange = (event: React.SyntheticEvent, newValue: SideBarTabs) => { + setActiveTab(newValue); + }; const _lastPublishedRequest = useAsync(async () => { const date = await lastPublished(flowId); @@ -335,7 +418,7 @@ const PreviewBrowser: React.FC<{ const teamSlug = window.location.pathname.split("/")[1]; return ( - +
- - - + + + + + + + {activeTab === "PreviewBrowser" && + + + + } + {activeTab === "History" && + + +

History

+ + + } {showDebugConsole && } - + ); }); diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx index 42ec847356..fe05eeb961 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx +++ b/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 = ({ currentTab, tabs }) => { diff --git a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss index 5406c62011..1481c21f65 100644 --- a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss +++ b/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; From 1576837846890b15edbd2c8b773f260c1ae26957 Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Tue, 23 Apr 2024 16:32:53 +0100 Subject: [PATCH 2/4] chore: add Gloucester subdomain to editor envs (#3048) --- editor.planx.uk/src/airbrake.ts | 11 ++++++----- editor.planx.uk/src/routes/utils.ts | 11 ++++++----- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/editor.planx.uk/src/airbrake.ts b/editor.planx.uk/src/airbrake.ts index 2889a3c943..9d8e284042 100644 --- a/editor.planx.uk/src/airbrake.ts +++ b/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"; diff --git a/editor.planx.uk/src/routes/utils.ts b/editor.planx.uk/src/routes/utils.ts index ce0a297406..e293bee05c 100644 --- a/editor.planx.uk/src/routes/utils.ts +++ b/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", ]; From 291346d85a8bd6ad59490b576d87fb9859407eca Mon Sep 17 00:00:00 2001 From: Ian Jones <51156018+ianjon3s@users.noreply.github.com> Date: Tue, 23 Apr 2024 21:42:40 +0100 Subject: [PATCH 3/4] fix: Input widths for multi input rows (#3046) --- editor.planx.uk/src/@planx/components/Checklist/Editor.tsx | 3 ++- editor.planx.uk/src/@planx/components/Question/Editor.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx index 894bcc9505..0e4c24a94b 100644 --- a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx +++ b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx @@ -62,7 +62,7 @@ const OptionEditor: React.FC<{ {props.value.id ? ( ) : null} - + {typeof props.index !== "undefined" && diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx index 2a3d074f0f..9b5da4ad30 100644 --- a/editor.planx.uk/src/@planx/components/Question/Editor.tsx +++ b/editor.planx.uk/src/@planx/components/Question/Editor.tsx @@ -44,7 +44,7 @@ const OptionEditor: React.FC<{ {props.value.id && ( )} - + Date: Wed, 24 Apr 2024 07:42:07 +0100 Subject: [PATCH 4/4] fix: quick adjustment to "History" tab to display "Coming soon" (#3050) --- .../FlowEditor/components/PreviewBrowser.tsx | 36 ++++++++++++------- 1 file changed, 23 insertions(+), 13 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx b/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx index e0b01cfce5..0334a34c14 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx @@ -19,8 +19,8 @@ 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 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"; @@ -28,6 +28,7 @@ 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"; @@ -100,7 +101,6 @@ const TabList = styled(Box)(({ theme }) => ({ }, })); - const StyledTab = styled(Tab)(({ theme }) => ({ position: "relative", zIndex: 1, @@ -122,8 +122,6 @@ const StyledTab = styled(Tab)(({ theme }) => ({ }, })) as typeof Tab; - - const formatLastPublish = (date: string, user: string) => `Last published ${formatDistanceToNow(new Date(date))} ago by ${user}`; @@ -160,7 +158,7 @@ interface AlteredNode { data?: any; } -type SideBarTabs = "PreviewBrowser" | "History" +type SideBarTabs = "PreviewBrowser" | "History"; const AlteredNodeListItem = (props: { node: AlteredNode }) => { const { node } = props; @@ -630,22 +628,34 @@ const PreviewBrowser: React.FC<{ - - + + - {activeTab === "PreviewBrowser" && + {activeTab === "PreviewBrowser" && ( - } - {activeTab === "History" && + )} + {activeTab === "History" && ( -

History

+ - } + )} {showDebugConsole && } );