From 30cae3d5a642a4365c5b2d9abfb1ff195411f4ea Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Wed, 31 Jul 2024 15:14:20 +0100 Subject: [PATCH 01/51] add option for link --- .../FlowEditor/components/Sidebar/index.tsx | 252 +++++++++++++++++- 1 file changed, 243 insertions(+), 9 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 5479a2b7fe..0dce9b547f 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -1,11 +1,16 @@ +import ContentCopyIcon from "@mui/icons-material/ContentCopy"; +import ContentCopyTwoToneIcon from "@mui/icons-material/ContentCopyTwoTone"; 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 SignalCellularAltIcon from "@mui/icons-material/SignalCellularAlt"; +import Alert from "@mui/material/Alert"; import Badge from "@mui/material/Badge"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; +import Chip from "@mui/material/Chip"; import Container from "@mui/material/Container"; import Dialog from "@mui/material/Dialog"; import DialogActions from "@mui/material/DialogActions"; @@ -132,7 +137,7 @@ const DebugConsole = () => { state.breadcrumbs, state.id, state.cachedBreadcrumbs, - ], + ] ); return ( @@ -175,15 +180,16 @@ const Sidebar: React.FC<{ ]); const [key, setKey] = useState(false); const [lastPublishedTitle, setLastPublishedTitle] = useState( - "This flow is not published yet", + "This flow is not published yet" ); const [validationChecks, setValidationChecks] = useState( - [], + [] ); const [alteredNodes, setAlteredNodes] = useState(); const [dialogOpen, setDialogOpen] = useState(false); const [summary, setSummary] = useState(); const [activeTab, setActiveTab] = useState("PreviewBrowser"); + const [isCopied, setIsCopied] = useState(false); const handleChange = (event: React.SyntheticEvent, newValue: SidebarTabs) => { setActiveTab(newValue); @@ -194,12 +200,12 @@ const Sidebar: React.FC<{ setLastPublishedTitle("Checking for changes..."); const alteredFlow = await validateAndDiffFlow(flowId); setAlteredNodes( - alteredFlow?.data.alteredNodes ? alteredFlow.data.alteredNodes : [], + alteredFlow?.data.alteredNodes ? alteredFlow.data.alteredNodes : [] ); setLastPublishedTitle( alteredFlow?.data.alteredNodes ? `Found changes to ${alteredFlow.data.alteredNodes.length} nodes` - : alteredFlow?.data.message, + : alteredFlow?.data.message ); setValidationChecks(alteredFlow?.data?.validationChecks); setDialogOpen(true); @@ -210,7 +216,7 @@ const Sidebar: React.FC<{ alert(error.response?.data?.error); } else { alert( - `Error checking for changes to publish. Confirm that your graph does not have any corrupted nodes and that all external portals are valid. \n${error}`, + `Error checking for changes to publish. Confirm that your graph does not have any corrupted nodes and that all external portals are valid. \n${error}` ); } } @@ -224,7 +230,7 @@ const Sidebar: React.FC<{ setLastPublishedTitle( alteredNodes ? `Successfully published changes to ${alteredNodes.length} nodes` - : `${message}` || "No new changes to publish", + : `${message}` || "No new changes to publish" ); } catch (error) { setLastPublishedTitle("Error trying to publish"); @@ -242,23 +248,229 @@ const Sidebar: React.FC<{ const _validateAndDiffRequest = useAsync(async () => { const newChanges = await validateAndDiffFlow(flowId); setAlteredNodes( - newChanges?.data.alteredNodes ? newChanges.data.alteredNodes : [], + newChanges?.data.alteredNodes ? newChanges.data.alteredNodes : [] ); }); // useStore.getState().getTeam().slug undefined here, use window instead const teamSlug = window.location.pathname.split("/")[1]; + const handleClick = () => { + navigator.clipboard.writeText(props.url.replace("/published", "/preview")); + setIsCopied(true); + setTimeout(() => { + setIsCopied(false); + }, 1000); + }; + return (
+ + {isCopied ? : } + + + { + resetPreview(); + setKey((a) => !a); + }} + /> + + + + setDebugConsoleVisibility(!showDebugConsole)} + /> + + + {flowAnalyticsLink ? ( + + + + + + ) : ( + + + + + + + + )} + + + + + + + + + + + + + + + + {isFlowPublished ? ( + + + + + + ) : ( + + + + + + + + )} + + + + + + + + + } + label={"Copy your published link"} + onClick={handleClick} + sx={{ padding: "12px" }} + /> + + + { + resetPreview(); + setKey((a) => !a); + }} + /> + + + + setDebugConsoleVisibility(!showDebugConsole)} + /> + + + {flowAnalyticsLink ? ( + + + + + + ) : ( + + + + + + + + )} + + + + + + + + + + + + + + + {isFlowPublished ? ( + + + + + + ) : ( + + + + + + + + )} + + + + + { @@ -274,6 +486,27 @@ const Sidebar: React.FC<{ /> + {flowAnalyticsLink ? ( + + + + + + ) : ( + + + + + + + + )} + )} + Date: Mon, 5 Aug 2024 14:00:57 +0100 Subject: [PATCH 02/51] add skeleton layout --- .../FlowEditor/components/Sidebar/index.tsx | 349 ++---------------- 1 file changed, 36 insertions(+), 313 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 0dce9b547f..e6b82e7c29 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -1,16 +1,7 @@ -import ContentCopyIcon from "@mui/icons-material/ContentCopy"; -import ContentCopyTwoToneIcon from "@mui/icons-material/ContentCopyTwoTone"; -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 SignalCellularAltIcon from "@mui/icons-material/SignalCellularAlt"; -import Alert from "@mui/material/Alert"; +import LinkIcon from "@mui/icons-material/Link"; import Badge from "@mui/material/Badge"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; -import Chip from "@mui/material/Chip"; import Container from "@mui/material/Container"; import Dialog from "@mui/material/Dialog"; import DialogActions from "@mui/material/DialogActions"; @@ -80,12 +71,6 @@ const Header = styled("header")(({ theme }) => ({ 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 }) => ({ @@ -137,7 +122,7 @@ const DebugConsole = () => { state.breadcrumbs, state.id, state.cachedBreadcrumbs, - ] + ], ); return ( @@ -180,10 +165,10 @@ const Sidebar: React.FC<{ ]); const [key, setKey] = useState(false); const [lastPublishedTitle, setLastPublishedTitle] = useState( - "This flow is not published yet" + "This flow is not published yet", ); const [validationChecks, setValidationChecks] = useState( - [] + [], ); const [alteredNodes, setAlteredNodes] = useState(); const [dialogOpen, setDialogOpen] = useState(false); @@ -200,12 +185,12 @@ const Sidebar: React.FC<{ setLastPublishedTitle("Checking for changes..."); const alteredFlow = await validateAndDiffFlow(flowId); setAlteredNodes( - alteredFlow?.data.alteredNodes ? alteredFlow.data.alteredNodes : [] + alteredFlow?.data.alteredNodes ? alteredFlow.data.alteredNodes : [], ); setLastPublishedTitle( alteredFlow?.data.alteredNodes ? `Found changes to ${alteredFlow.data.alteredNodes.length} nodes` - : alteredFlow?.data.message + : alteredFlow?.data.message, ); setValidationChecks(alteredFlow?.data?.validationChecks); setDialogOpen(true); @@ -216,7 +201,7 @@ const Sidebar: React.FC<{ alert(error.response?.data?.error); } else { alert( - `Error checking for changes to publish. Confirm that your graph does not have any corrupted nodes and that all external portals are valid. \n${error}` + `Error checking for changes to publish. Confirm that your graph does not have any corrupted nodes and that all external portals are valid. \n${error}`, ); } } @@ -230,7 +215,7 @@ const Sidebar: React.FC<{ setLastPublishedTitle( alteredNodes ? `Successfully published changes to ${alteredNodes.length} nodes` - : `${message}` || "No new changes to publish" + : `${message}` || "No new changes to publish", ); } catch (error) { setLastPublishedTitle("Error trying to publish"); @@ -248,7 +233,7 @@ const Sidebar: React.FC<{ const _validateAndDiffRequest = useAsync(async () => { const newChanges = await validateAndDiffFlow(flowId); setAlteredNodes( - newChanges?.data.alteredNodes ? newChanges.data.alteredNodes : [] + newChanges?.data.alteredNodes ? newChanges.data.alteredNodes : [], ); }); @@ -266,294 +251,27 @@ const Sidebar: React.FC<{ return (
- - - + - - {lastPublishedTitle} + + + {lastPublishedTitle} + From 430a3452d726ee0a35cc5dc50e6e9f65ff9751c9 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 5 Aug 2024 14:06:51 +0100 Subject: [PATCH 03/51] openable dialog added without content --- .../FlowEditor/components/Sidebar/index.tsx | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index e6b82e7c29..5153017357 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -175,6 +175,7 @@ const Sidebar: React.FC<{ const [summary, setSummary] = useState(); const [activeTab, setActiveTab] = useState("PreviewBrowser"); const [isCopied, setIsCopied] = useState(false); + const [linkDialogOpen, setLinkDialogOpen] = useState(false); const handleChange = (event: React.SyntheticEvent, newValue: SidebarTabs) => { setActiveTab(newValue); @@ -240,12 +241,9 @@ const Sidebar: React.FC<{ // useStore.getState().getTeam().slug undefined here, use window instead const teamSlug = window.location.pathname.split("/")[1]; + // navigator.clipboard.writeText(props.url.replace("/published", "/preview")); const handleClick = () => { - navigator.clipboard.writeText(props.url.replace("/published", "/preview")); - setIsCopied(true); - setTimeout(() => { - setIsCopied(false); - }, 1000); + setLinkDialogOpen(true); }; return ( @@ -268,10 +266,23 @@ const Sidebar: React.FC<{ }} variant="contained" color="secondary" + onClick={handleClick} disabled={!useStore.getState().canUserEditTeam(teamSlug)} > Copy link + setLinkDialogOpen(false)} + aria-labelledby="alert-dialog-title" + aria-describedby="alert-dialog-description" + maxWidth="md" + > + + {`Links to Copy`} + + + Date: Mon, 5 Aug 2024 15:08:04 +0100 Subject: [PATCH 04/51] add test link for dialog item --- .../FlowEditor/components/Sidebar/index.tsx | 57 ++++++++++++++++++- 1 file changed, 55 insertions(+), 2 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 5153017357..c109358533 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -1,3 +1,5 @@ +import CloseIcon from "@mui/icons-material/Close"; +import ContentCopyIcon from "@mui/icons-material/ContentCopy"; import LinkIcon from "@mui/icons-material/Link"; import Badge from "@mui/material/Badge"; import Box from "@mui/material/Box"; @@ -7,6 +9,7 @@ import Dialog from "@mui/material/Dialog"; import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; import DialogTitle from "@mui/material/DialogTitle"; +import Divider from "@mui/material/Divider"; import Link from "@mui/material/Link"; import { styled } from "@mui/material/styles"; import Tab, { tabClasses } from "@mui/material/Tab"; @@ -176,6 +179,7 @@ const Sidebar: React.FC<{ const [activeTab, setActiveTab] = useState("PreviewBrowser"); const [isCopied, setIsCopied] = useState(false); const [linkDialogOpen, setLinkDialogOpen] = useState(false); + const [copyMessage, setCopyMessage] = useState<"copy" | "copied">("copy"); const handleChange = (event: React.SyntheticEvent, newValue: SidebarTabs) => { setActiveTab(newValue); @@ -271,6 +275,7 @@ const Sidebar: React.FC<{ > Copy link + setLinkDialogOpen(false)} @@ -278,10 +283,58 @@ const Sidebar: React.FC<{ aria-describedby="alert-dialog-description" maxWidth="md" > - + + + + + {`Links to Copy`} - + + + + + {"Published flow with subdomain"} + + + { + setCopyMessage("copy"); + }} + onClick={() => { + setCopyMessage("copied"); + navigator.clipboard.writeText( + props.url.replace("/published", "/preview"), + ); + }} + > + + + {"copy"} + + + + + {props.url.replace("/published", "/preview")} + + {"This is the description of the published link"} + + + Date: Mon, 5 Aug 2024 15:32:56 +0100 Subject: [PATCH 05/51] add header to dialog box --- .../src/pages/FlowEditor/components/Sidebar/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index c109358533..2d898e9a3d 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -286,6 +286,7 @@ const Sidebar: React.FC<{ {props.url.replace("/published", "/preview")} From a330d3db7f9f5f14c8de403c75cde9fb95f537d9 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Tue, 6 Aug 2024 11:32:24 +0100 Subject: [PATCH 11/51] add comp for containing link logic --- .../FlowEditor/components/Sidebar/index.tsx | 82 ++++++++++++++++++- 1 file changed, 81 insertions(+), 1 deletion(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 092600dcc6..4577641254 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -13,6 +13,7 @@ import Divider from "@mui/material/Divider"; import Link from "@mui/material/Link"; import Stack from "@mui/material/Stack"; import { styled } from "@mui/material/styles"; +import { SvgIconProps } from "@mui/material/SvgIcon"; import Tab, { tabClasses } from "@mui/material/Tab"; import Tabs from "@mui/material/Tabs"; import Tooltip from "@mui/material/Tooltip"; @@ -37,7 +38,6 @@ import { ValidationChecks, } from "./PublishDialog"; import Search from "./Search"; - type SidebarTabs = "PreviewBrowser" | "History" | "Search"; const Console = styled(Box)(() => ({ @@ -157,6 +157,72 @@ const DebugConsole = () => { ); }; +const LinkComponent = (props: { + primaryColour?: string; + titleIcon?: string | SvgIconProps; + title: string; + link: string; + description: string; +}) => { + const [copyMessage, setCopyMessage] = useState<"copy" | "copied">("copy"); + + return ( + + + {typeof props.titleIcon === "string" ? ( + + Local authority logo + + ) : ( + <>{props.titleIcon} + )} + + + {props.title} + + + + + + {props.link} + {props.description} + + ); +}; + const Sidebar: React.FC<{ url: string; }> = React.memo((props) => { @@ -332,6 +398,20 @@ const Sidebar: React.FC<{ gap={"8px"} mb={1} > + + } + title={"Trial Link"} + link={props.url.replace("/published", "/draft")} + description="This is the description for a test link to trial a new component" + /> Date: Tue, 6 Aug 2024 11:48:51 +0100 Subject: [PATCH 12/51] add isPublished logic to published link --- .../FlowEditor/components/Sidebar/index.tsx | 312 +++--------------- 1 file changed, 50 insertions(+), 262 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 4577641254..d4134d5ed4 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -1,6 +1,11 @@ import CloseIcon from "@mui/icons-material/Close"; import ContentCopyIcon from "@mui/icons-material/ContentCopy"; +import LanguageIcon from "@mui/icons-material/Language"; import LinkIcon from "@mui/icons-material/Link"; +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"; @@ -101,12 +106,12 @@ const TabList = styled(Box)(({ theme }) => ({ })); const ImageWrapper = styled(Box)(() => ({ - width: "auto", height: 24, + width: 24, display: "flex", justifyContent: "center", alignItems: "center", - padding: "4px", + padding: "2px", })); const StyledTab = styled(Tab)(({ theme }) => ({ @@ -162,12 +167,22 @@ const LinkComponent = (props: { titleIcon?: string | SvgIconProps; title: string; link: string; - description: string; + description?: string; + isPublished?: boolean; }) => { const [copyMessage, setCopyMessage] = useState<"copy" | "copied">("copy"); return ( - + Local authority logo @@ -198,7 +213,7 @@ const LinkComponent = (props: { onMouseLeave={() => { setTimeout(() => { setCopyMessage("copy"); - }, 1000); + }, 500); }} onClick={() => { setCopyMessage("copied"); @@ -373,6 +388,7 @@ const Sidebar: React.FC<{ onClose={() => setLinkDialogOpen(false)} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" + fullWidth maxWidth="md" > @@ -392,261 +408,33 @@ const Sidebar: React.FC<{ - - - } - title={"Trial Link"} - link={props.url.replace("/published", "/draft")} - description="This is the description for a test link to trial a new component" - /> - - - Local authority logo - - - - {"Published flow with subdomain"} - - - - - - {props.url.replace("/published", "/preview")} - - {"This is the description of the published link"} - - - - - - Local authority logo - - - - {"Published flow with subdomain"} - - - { - setTimeout(() => { - setCopyMessage("copy"); - }, 1000); - }} - onClick={() => { - setCopyMessage("copied"); - navigator.clipboard.writeText( - props.url.replace("/published", "/preview"), - ); - }} - > - - - {copyMessage} - - - - - {props.url.replace("/published", "/preview")} - - {"This is the description of the published link"} - - - - - - Local authority logo - - - - {"Published flow with subdomain"} - - - { - setTimeout(() => { - setCopyMessage("copy"); - }, 1000); - }} - onClick={() => { - setCopyMessage("copied"); - navigator.clipboard.writeText( - props.url.replace("/published", "/preview"), - ); - }} - > - - - {copyMessage} - - - - - {props.url.replace("/published", "/preview")} - - {"This is the description of the published link"} - - - - - - Local authority logo - - - - {"Published flow with subdomain"} - - - { - setTimeout(() => { - setCopyMessage("copy"); - }, 1000); - }} - onClick={() => { - setCopyMessage("copied"); - navigator.clipboard.writeText( - props.url.replace("/published", "/preview"), - ); - }} - > - - - {copyMessage} - - - - - {props.url.replace("/published", "/preview")} - - {"This is the description of the published link"} - - + + } + title={"Published"} + isPublished={isFlowPublished} + link={props.url.replace("/published", "/published")} + description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." + /> + } + title={"Preview"} + link={props.url.replace("/published", "/preview")} + description="Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." + />{" "} + } + title={"Draft"} + link={props.url.replace("/published", "/draft")} + description="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." + /> From f08f3e96dcfb7447cd13f63b5ed9474e97532bc9 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Tue, 6 Aug 2024 11:50:54 +0100 Subject: [PATCH 13/51] remove old copy message --- .../src/pages/FlowEditor/components/Sidebar/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index d4134d5ed4..5cb98a5c15 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -273,7 +273,6 @@ const Sidebar: React.FC<{ const [summary, setSummary] = useState(); const [activeTab, setActiveTab] = useState("PreviewBrowser"); const [linkDialogOpen, setLinkDialogOpen] = useState(false); - const [copyMessage, setCopyMessage] = useState<"copy" | "copied">("copy"); const [currentTeam, setCurrentTeam] = useState(undefined); const handleChange = (event: React.SyntheticEvent, newValue: SidebarTabs) => { From 1610886ba6e4cd511e595dc9628db708f2fdcc21 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Tue, 6 Aug 2024 12:00:48 +0100 Subject: [PATCH 14/51] add domain to Link list --- .../FlowEditor/components/Sidebar/index.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 5cb98a5c15..06fd31f80d 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -289,8 +289,6 @@ const Sidebar: React.FC<{ getCurrentTeam(); }, []); - console.log(currentTeam); - const handleCheckForChangesToPublish = async () => { try { setLastPublishedTitle("Checking for changes..."); @@ -350,8 +348,8 @@ const Sidebar: React.FC<{ // useStore.getState().getTeam().slug undefined here, use window instead const teamSlug = window.location.pathname.split("/")[1]; + const flowSlug = window.location.pathname.split("/")[2]; - // navigator.clipboard.writeText(props.url.replace("/published", "/preview")); const handleClick = () => { setLinkDialogOpen(true); }; @@ -407,12 +405,14 @@ const Sidebar: React.FC<{ - + {currentTeam?.domain && ( + + )} } title={"Published"} From 52d0c5b484c31894249b27314b619e95951a30a6 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Tue, 6 Aug 2024 12:10:16 +0100 Subject: [PATCH 15/51] remove console log and string for string replace --- .../src/pages/FlowEditor/components/Sidebar/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 06fd31f80d..a537c50a4d 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -417,7 +417,7 @@ const Sidebar: React.FC<{ titleIcon={} title={"Published"} isPublished={isFlowPublished} - link={props.url.replace("/published", "/published")} + link={props.url} description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." /> Date: Tue, 6 Aug 2024 15:32:46 +0100 Subject: [PATCH 16/51] add planx-core changes and toggle button --- editor.planx.uk/package.json | 2 +- editor.planx.uk/pnpm-lock.yaml | 16 ++-- .../FlowEditor/components/Sidebar/index.tsx | 73 +++++++++++++------ 3 files changed, 60 insertions(+), 31 deletions(-) diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json index 1c232cddff..fdd05e098a 100644 --- a/editor.planx.uk/package.json +++ b/editor.planx.uk/package.json @@ -14,7 +14,7 @@ "@mui/material": "^5.15.10", "@mui/utils": "^5.15.11", "@opensystemslab/map": "^0.8.3", - "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#6b2fd26", + "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#7c37fc3", "@tiptap/core": "^2.4.0", "@tiptap/extension-bold": "^2.0.3", "@tiptap/extension-bubble-menu": "^2.1.13", diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml index 625e0b510a..5f158a8aaf 100644 --- a/editor.planx.uk/pnpm-lock.yaml +++ b/editor.planx.uk/pnpm-lock.yaml @@ -46,8 +46,8 @@ dependencies: specifier: ^0.8.3 version: 0.8.3 '@opensystemslab/planx-core': - specifier: git+https://github.com/theopensystemslab/planx-core#6b2fd26 - version: github.com/theopensystemslab/planx-core/6b2fd26(@types/react@18.2.45) + specifier: git+https://github.com/theopensystemslab/planx-core#7c37fc3 + version: github.com/theopensystemslab/planx-core/7c37fc3(@types/react@18.2.45) '@tiptap/core': specifier: ^2.4.0 version: 2.4.0(@tiptap/pm@2.0.3) @@ -15182,8 +15182,8 @@ packages: /json-parse-even-better-errors@2.3.1: resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==} - /json-schema-to-typescript@14.1.0: - resolution: {integrity: sha512-VIeAFQkn88gFh26MSHWG4uX7TjK/arTw0NVLMZn6vX1WrSF+P6xu5MyEdovu+9PJ0uiS5gm0wzwQvYW9eSq1uw==} + /json-schema-to-typescript@15.0.0: + resolution: {integrity: sha512-gOX3cJB4eL1ztMc3WUh569ubRcKnr8MnYk++6+/WaaN4bufGHSR6EcbUbvLZgirPQOfvni5SSGkRx0pYloYU8A==} engines: {node: '>=16.0.0'} hasBin: true dependencies: @@ -21898,9 +21898,9 @@ packages: use-sync-external-store: 1.2.0(react@18.2.0) dev: false - github.com/theopensystemslab/planx-core/6b2fd26(@types/react@18.2.45): - resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/6b2fd26} - id: github.com/theopensystemslab/planx-core/6b2fd26 + github.com/theopensystemslab/planx-core/7c37fc3(@types/react@18.2.45): + resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/7c37fc3} + id: github.com/theopensystemslab/planx-core/7c37fc3 name: '@opensystemslab/planx-core' version: 1.0.0 prepare: true @@ -21920,7 +21920,7 @@ packages: fast-xml-parser: 4.4.1 graphql: 16.9.0 graphql-request: 6.1.0(graphql@16.9.0) - json-schema-to-typescript: 14.1.0 + json-schema-to-typescript: 15.0.0 lodash: 4.17.21 marked: 13.0.3 prettier: 3.3.3 diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index a537c50a4d..516f0bdcc2 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -1,3 +1,4 @@ +import ChevronRightRounded from "@mui/icons-material/ChevronRightRounded"; import CloseIcon from "@mui/icons-material/Close"; import ContentCopyIcon from "@mui/icons-material/ContentCopy"; import LanguageIcon from "@mui/icons-material/Language"; @@ -18,6 +19,7 @@ import Divider from "@mui/material/Divider"; import Link from "@mui/material/Link"; import Stack from "@mui/material/Stack"; import { styled } from "@mui/material/styles"; +import { darken } from "@mui/material/styles"; import { SvgIconProps } from "@mui/material/SvgIcon"; import Tab, { tabClasses } from "@mui/material/Tab"; import Tabs from "@mui/material/Tabs"; @@ -59,6 +61,7 @@ const Root = styled(Box)(({ theme }) => ({ width: "500px", display: "flex", flexShrink: 0, + zIndex: 1, flexDirection: "column", borderLeft: `1px solid ${theme.palette.border.main}`, background: theme.palette.background.paper, @@ -79,11 +82,40 @@ const Header = styled("header")(({ theme }) => ({ flex: "1", padding: "5px", marginRight: "5px", - background: theme.palette.common.white, + background: theme.palette.background.paper, + border: "1px solid rgba(0, 0, 0, 0.2)", }, })); +const ToggleButton = styled(Button)(({ theme }) => ({ + background: theme.palette.background.paper, + border: `1px solid ${theme.palette.border.main}`, + borderImage: `linear-gradient(to right, ${theme.palette.border.main} 50%, transparent 50%) 30% 1`, + position: "absolute", + left: "-35px", + height: "100%", + boxShadow: "none", + textAlign: "left", + paddingLeft: "4px", + "&:hover": { + background: theme.palette.background.paper, + boxShadow: "none", + }, +})); + +const CopyButton = styled(Button)(({ theme }) => ({ + background: theme.palette.common.white, + border: `1px solid ${theme.palette.border.main}`, + boxShadow: "none", + color: theme.palette.common.black, + width: "35%", + display: "flex", + flexDirection: "row", + gap: "8px", + borderRadius: "5px", +})); + const TabList = styled(Box)(({ theme }) => ({ position: "relative", // Use a pseudo element as border to allow for tab border overlap without excessive MUI overrides @@ -251,6 +283,7 @@ const Sidebar: React.FC<{ validateAndDiffFlow, isFlowPublished, fetchCurrentTeam, + togglePreview, ] = useStore((state) => [ state.id, state.resetPreview, @@ -260,6 +293,7 @@ const Sidebar: React.FC<{ state.validateAndDiffFlow, state.isFlowPublished, state.fetchCurrentTeam, + state.togglePreview, ]); const [key, setKey] = useState(false); const [lastPublishedTitle, setLastPublishedTitle] = useState( @@ -361,24 +395,21 @@ const Sidebar: React.FC<{ width="100%" mt={2} mb={2} + pl={2} display="flex" flexDirection="row" gap={"24px"} + style={{ position: "relative" }} > - + - - {`Links to Copy`} + + {`Share this flow`} @@ -409,30 +440,28 @@ const Sidebar: React.FC<{ )} } - title={"Published"} + title={"Published flow"} isPublished={isFlowPublished} link={props.url} - description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." + description="View of the currently published version of this flow." /> } - title={"Preview"} + title={"Preview flow"} link={props.url.replace("/published", "/preview")} - description="Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." + description="View of the draft data of the main flow and the latest published version of nested flows. This link is representative of what your next published version will look like." />{" "} } - title={"Draft"} + title={"Draft flow"} link={props.url.replace("/published", "/draft")} - description="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." + description="View of the draft data of the main flow and the draft data of nested flows.This link is not representative of what your next published version will look like." /> From ee3f778d19b25cba7b16018eb2a48410a2cd697b Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Tue, 6 Aug 2024 15:40:57 +0100 Subject: [PATCH 17/51] add stylin in line with figma --- .../src/pages/FlowEditor/components/Sidebar/index.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 516f0bdcc2..6f374aee44 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -3,10 +3,8 @@ import CloseIcon from "@mui/icons-material/Close"; import ContentCopyIcon from "@mui/icons-material/ContentCopy"; import LanguageIcon from "@mui/icons-material/Language"; import LinkIcon from "@mui/icons-material/Link"; -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"; @@ -19,14 +17,12 @@ import Divider from "@mui/material/Divider"; import Link from "@mui/material/Link"; import Stack from "@mui/material/Stack"; import { styled } from "@mui/material/styles"; -import { darken } from "@mui/material/styles"; import { SvgIconProps } from "@mui/material/SvgIcon"; 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 { Team } from "@opensystemslab/planx-core/types"; -import { Image } from "@planx/components/shared/Preview/CardHeader"; import { AxiosError } from "axios"; import { hasFeatureFlag } from "lib/featureFlags"; import { formatLastPublishMessage } from "pages/FlowEditor/utils"; @@ -257,6 +253,7 @@ const LinkComponent = (props: { flexDirection={"row"} gap={"4px"} variant="body2" + sx={{ textDecoration: "underline dotted" }} > {copyMessage} @@ -264,7 +261,7 @@ const LinkComponent = (props: { - {props.link} + {props.link} {props.description} ); From 3538dd383d222dcfd75308b8b6e0376c6d575be2 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Tue, 6 Aug 2024 15:56:05 +0100 Subject: [PATCH 18/51] styling and permissions --- .../FlowEditor/components/Sidebar/index.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 6f374aee44..e9d0a40e93 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -405,7 +405,7 @@ const Sidebar: React.FC<{ onClick={handleClick} disabled={!useStore.getState().canUserEditTeam(teamSlug)} > - Copy link + View links {" "} - } - title={"Draft flow"} - link={props.url.replace("/published", "/draft")} - description="View of the draft data of the main flow and the draft data of nested flows.This link is not representative of what your next published version will look like." - /> + + } + title={"Draft flow"} + link={props.url.replace("/published", "/draft")} + description="View of the draft data of the main flow and the draft data of nested flows.This link is not representative of what your next published version will look like." + /> + From 80ba13e942c0be58066cd5ed7dcd60d1fb0ab8f6 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Tue, 6 Aug 2024 16:06:52 +0100 Subject: [PATCH 19/51] fix padding on copy button and switch name to view in line with the text --- .../src/pages/FlowEditor/components/Sidebar/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index e9d0a40e93..3d326f101e 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -110,6 +110,7 @@ const CopyButton = styled(Button)(({ theme }) => ({ flexDirection: "row", gap: "8px", borderRadius: "5px", + padding: "8px", })); const TabList = styled(Box)(({ theme }) => ({ From f56b65866aba18916ca8bca16501e84bbc968e2e Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Tue, 6 Aug 2024 16:07:20 +0100 Subject: [PATCH 20/51] alter copy button name to view button --- .../src/pages/FlowEditor/components/Sidebar/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 3d326f101e..52e6289308 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -100,7 +100,7 @@ const ToggleButton = styled(Button)(({ theme }) => ({ }, })); -const CopyButton = styled(Button)(({ theme }) => ({ +const ViewButton = styled(Button)(({ theme }) => ({ background: theme.palette.common.white, border: `1px solid ${theme.palette.border.main}`, boxShadow: "none", @@ -402,12 +402,12 @@ const Sidebar: React.FC<{ - View links - + Date: Tue, 6 Aug 2024 16:27:34 +0100 Subject: [PATCH 21/51] remove redundant styling --- .../src/pages/FlowEditor/components/Sidebar/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 52e6289308..240b1c4849 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -238,7 +238,6 @@ const LinkComponent = (props: { - {props.link} + + {props.link}{" "} + {props.description} ); From a25baab57de560dc355f4b19685f4988411e3e1b Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Wed, 7 Aug 2024 11:38:18 +0100 Subject: [PATCH 24/51] revert sidebar toggle button --- .../FlowEditor/components/Sidebar/index.tsx | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index e9d5d7299b..afba4627a6 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -84,22 +84,6 @@ const Header = styled("header")(({ theme }) => ({ }, })); -const ToggleButton = styled(Button)(({ theme }) => ({ - background: theme.palette.background.paper, - border: `1px solid ${theme.palette.border.main}`, - borderImage: `linear-gradient(to right, ${theme.palette.border.main} 50%, transparent 50%) 30% 1`, - position: "absolute", - left: "-35px", - height: "100%", - boxShadow: "none", - textAlign: "left", - paddingLeft: "4px", - "&:hover": { - background: theme.palette.background.paper, - boxShadow: "none", - }, -})); - const ViewButton = styled(Button)(({ theme }) => ({ background: theme.palette.common.white, border: `1px solid ${theme.palette.border.main}`, @@ -404,9 +388,6 @@ const Sidebar: React.FC<{ gap={"24px"} style={{ position: "relative" }} > - - - Date: Wed, 7 Aug 2024 11:40:22 +0100 Subject: [PATCH 25/51] remove z-index style from root --- .../src/pages/FlowEditor/components/Sidebar/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index afba4627a6..b3a684a027 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -57,7 +57,6 @@ const Root = styled(Box)(({ theme }) => ({ width: "500px", display: "flex", flexShrink: 0, - zIndex: 1, flexDirection: "column", borderLeft: `1px solid ${theme.palette.border.main}`, background: theme.palette.background.paper, From ea6f63375c49abea2e2887b8519bc6b09ac8f14e Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Wed, 7 Aug 2024 12:00:18 +0100 Subject: [PATCH 26/51] add domain to store init team query --- .../FlowEditor/components/Sidebar/index.tsx | 34 ++++++++----------- .../src/pages/FlowEditor/lib/store/team.ts | 5 +++ 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index b3a684a027..660cbe367a 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -26,7 +26,7 @@ import { Team } from "@opensystemslab/planx-core/types"; import { AxiosError } from "axios"; import { hasFeatureFlag } from "lib/featureFlags"; import { formatLastPublishMessage } from "pages/FlowEditor/utils"; -import React, { useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { useAsync } from "react-use"; import Permission from "ui/editor/Permission"; import Input from "ui/shared/Input"; @@ -270,6 +270,10 @@ const Sidebar: React.FC<{ isFlowPublished, fetchCurrentTeam, togglePreview, + flowSlug, + teamSlug, + teamTheme, + teamDomain, ] = useStore((state) => [ state.id, state.resetPreview, @@ -280,6 +284,10 @@ const Sidebar: React.FC<{ state.isFlowPublished, state.fetchCurrentTeam, state.togglePreview, + state.flowSlug, + state.teamSlug, + state.teamTheme, + state.teamDomain, ]); const [key, setKey] = useState(false); const [lastPublishedTitle, setLastPublishedTitle] = useState( @@ -295,20 +303,12 @@ const Sidebar: React.FC<{ const [linkDialogOpen, setLinkDialogOpen] = useState(false); const [currentTeam, setCurrentTeam] = useState(undefined); + console.log({ teamTheme, teamSlug, teamDomain }); + const handleChange = (event: React.SyntheticEvent, newValue: SidebarTabs) => { setActiveTab(newValue); }; - useEffect(() => { - const getCurrentTeam = async () => { - const [response] = await Promise.all([fetchCurrentTeam()]); - setCurrentTeam(response); - return response; - }; - - getCurrentTeam(); - }, []); - const handleCheckForChangesToPublish = async () => { try { setLastPublishedTitle("Checking for changes..."); @@ -366,10 +366,6 @@ const Sidebar: React.FC<{ ); }); - // useStore.getState().getTeam().slug undefined here, use window instead - const teamSlug = window.location.pathname.split("/")[1]; - const flowSlug = window.location.pathname.split("/")[2]; - const handleClick = () => { setLinkDialogOpen(true); }; @@ -419,12 +415,12 @@ const Sidebar: React.FC<{ - {currentTeam?.domain && ( + {teamDomain && ( )} Date: Wed, 7 Aug 2024 12:03:32 +0100 Subject: [PATCH 27/51] add theme to initTeamStore --- editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts index 1c30c2dd26..432ba989e7 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts @@ -89,6 +89,10 @@ export const teamStore: StateCreator< name slug domain + theme { + primary_colour + logo + } flows(order_by: { updated_at: desc }) { slug updated_at From cdda20cf4fff2ce92b74dc01548fc9136f88893d Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Wed, 7 Aug 2024 14:36:08 +0100 Subject: [PATCH 28/51] add dialog as separate comp --- .../components/Sidebar/LinkDialog.tsx | 197 ++++++++++++++++++ .../FlowEditor/components/Sidebar/index.tsx | 161 +------------- .../src/pages/FlowEditor/lib/store/team.ts | 2 +- 3 files changed, 208 insertions(+), 152 deletions(-) create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx new file mode 100644 index 0000000000..28286b1c9f --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -0,0 +1,197 @@ +import CloseIcon from "@mui/icons-material/Close"; +import ContentCopyIcon from "@mui/icons-material/ContentCopy"; +import LanguageIcon from "@mui/icons-material/Language"; +import OpenInNewIcon from "@mui/icons-material/OpenInNew"; +import OpenInNewOffIcon from "@mui/icons-material/OpenInNewOff"; +import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; +import Dialog from "@mui/material/Dialog"; +import DialogContent from "@mui/material/DialogContent"; +import DialogTitle from "@mui/material/DialogTitle"; +import Divider from "@mui/material/Divider"; +import Link from "@mui/material/Link"; +import Stack from "@mui/material/Stack"; +import { styled } from "@mui/material/styles"; +import { SvgIconProps } from "@mui/material/SvgIcon"; +import Tooltip from "@mui/material/Tooltip"; +import Typography from "@mui/material/Typography"; +import { intersectDependencies } from "mathjs"; +import React, { useState } from "react"; +import Permission from "ui/editor/Permission"; + +interface DialogTeamTheme { + logo: string | null; + primaryColour: string; +} + +interface DialogBaseProps { + linkDialogOpen: boolean; + flowSlug: string; + isFlowPublished: boolean; + url: string; +} + +interface DialogPropsWithTheme { + containsTheme: true; + teamTheme: DialogTeamTheme; + teamDomain?: string; +} + +type DialogProps = DialogBaseProps & DialogPropsWithTheme; + +const ImageWrapper = styled(Box)(() => ({ + height: 24, + width: 24, + display: "flex", + justifyContent: "center", + alignItems: "center", + padding: "2px", +})); + +const LinkComponent = (props: { + primaryColour?: string; + titleIcon?: string | SvgIconProps; + title: string; + link: string; + description?: string; + isPublished?: boolean; +}) => { + const [copyMessage, setCopyMessage] = useState<"copy" | "copied">("copy"); + + return ( + + + {typeof props.titleIcon === "string" ? ( + + Local authority logo + + ) : ( + <>{props.titleIcon} + )} + + + {props.title} + + + + + + + {props.link}{" "} + + {props.description} + + ); +}; + +export default function LinkDialog(props: DialogProps) { + const [linkDialogOpen, setLinkDialogOpen] = useState( + props.linkDialogOpen, + ); + + return ( + setLinkDialogOpen(false)} + aria-labelledby="alert-dialog-title" + aria-describedby="alert-dialog-description" + fullWidth + maxWidth="md" + > + + + + + + {`Share this flow`} + + + + {props.teamDomain && props.teamTheme ? ( + + ) : null} + } + title={"Published flow"} + isPublished={props.isFlowPublished} + link={props.url} + description="View of the currently published version of this flow." + /> + } + title={"Preview flow"} + link={props.url.replace("/published", "/preview")} + description="View of the draft data of the main flow and the latest published version of nested flows. This link is representative of what your next published version will look like." + />{" "} + + } + title={"Draft flow"} + link={props.url.replace("/published", "/draft")} + description="View of the draft data of the main flow and the draft data of nested flows.This link is not representative of what your next published version will look like." + /> + + + + + ); +} diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 660cbe367a..0355a7fa8d 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -34,6 +34,7 @@ import Input from "ui/shared/Input"; import Questions from "../../../Preview/Questions"; import { useStore } from "../../lib/store"; import EditHistory from "./EditHistory"; +import LinkDialog from "./LinkDialog"; import { AlteredNode, AlteredNodesSummaryContent, @@ -117,15 +118,6 @@ const TabList = styled(Box)(({ theme }) => ({ }, })); -const ImageWrapper = styled(Box)(() => ({ - height: 24, - width: 24, - display: "flex", - justifyContent: "center", - alignItems: "center", - padding: "2px", -})); - const StyledTab = styled(Tab)(({ theme }) => ({ position: "relative", zIndex: 1, @@ -174,88 +166,6 @@ const DebugConsole = () => { ); }; -const LinkComponent = (props: { - primaryColour?: string; - titleIcon?: string | SvgIconProps; - title: string; - link: string; - description?: string; - isPublished?: boolean; -}) => { - const [copyMessage, setCopyMessage] = useState<"copy" | "copied">("copy"); - - return ( - - - {typeof props.titleIcon === "string" ? ( - - Local authority logo - - ) : ( - <>{props.titleIcon} - )} - - - {props.title} - - - - - - - {props.link}{" "} - - {props.description} - - ); -}; - const Sidebar: React.FC<{ url: string; }> = React.memo((props) => { @@ -301,9 +211,6 @@ const Sidebar: React.FC<{ const [summary, setSummary] = useState(); const [activeTab, setActiveTab] = useState("PreviewBrowser"); const [linkDialogOpen, setLinkDialogOpen] = useState(false); - const [currentTeam, setCurrentTeam] = useState(undefined); - - console.log({ teamTheme, teamSlug, teamDomain }); const handleChange = (event: React.SyntheticEvent, newValue: SidebarTabs) => { setActiveTab(newValue); @@ -389,64 +296,16 @@ const Sidebar: React.FC<{ > View links + - setLinkDialogOpen(false)} - aria-labelledby="alert-dialog-title" - aria-describedby="alert-dialog-description" - fullWidth - maxWidth="md" - > - - - - - - {`Share this flow`} - - - - {teamDomain && ( - - )} - } - title={"Published flow"} - isPublished={isFlowPublished} - link={props.url} - description="View of the currently published version of this flow." - /> - } - title={"Preview flow"} - link={props.url.replace("/published", "/preview")} - description="View of the draft data of the main flow and the latest published version of nested flows. This link is representative of what your next published version will look like." - />{" "} - - } - title={"Draft flow"} - link={props.url.replace("/published", "/draft")} - description="View of the draft data of the main flow and the draft data of nested flows.This link is not representative of what your next published version will look like." - /> - - - - Date: Wed, 7 Aug 2024 16:14:00 +0100 Subject: [PATCH 29/51] add logic for styling the header --- editor.planx.uk/src/components/Header.tsx | 18 ++++++++++++++++-- .../FlowEditor/components/Sidebar/index.tsx | 8 ++------ 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx index e15200994e..4fe8fe97f3 100644 --- a/editor.planx.uk/src/components/Header.tsx +++ b/editor.planx.uk/src/components/Header.tsx @@ -24,7 +24,7 @@ import { clearLocalFlow } from "lib/local"; import { capitalize } from "lodash"; import { Route } from "navi"; import { useAnalyticsTracking } from "pages/FlowEditor/lib/analytics/provider"; -import React, { RefObject, useRef, useState } from "react"; +import React, { RefObject, useEffect, useRef, useState } from "react"; import { Link as ReactNaviLink, useCurrentRoute, @@ -577,8 +577,19 @@ const Toolbar: React.FC = ({ headerRef }) => { }; const Header: React.FC = () => { + const [isOutsideEditor, setIsOutsideEditor] = useState(false); const headerRef = useRef(null); const theme = useStore((state) => state.teamTheme); + const environment = useStore((state) => state.previewEnvironment); + const pathnameArray = window.location.pathname.split("/"); + + useEffect(() => { + const findPathname = pathnameArray.find( + (pathname) => pathname === "preview" || pathname === "draft", + ); + setIsOutsideEditor(Boolean(findPathname)); + }, pathnameArray); + return ( { color="transparent" ref={headerRef} sx={{ - backgroundColor: theme?.primaryColour || "#2c2c2c", + backgroundColor: + isOutsideEditor || environment === "standalone" + ? theme.primaryColour + : "#2c2c2c", "@media print": { backgroundColor: "white", color: "black" }, }} > diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 0355a7fa8d..58f36c55b5 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -273,10 +273,6 @@ const Sidebar: React.FC<{ ); }); - const handleClick = () => { - setLinkDialogOpen(true); - }; - return (
@@ -291,14 +287,14 @@ const Sidebar: React.FC<{ style={{ position: "relative" }} > setLinkDialogOpen(true)} disabled={!useStore.getState().canUserEditTeam(teamSlug)} > View links Date: Wed, 7 Aug 2024 16:15:41 +0100 Subject: [PATCH 30/51] fix logic for opening and closing dialog in sidebar --- .../src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index 28286b1c9f..380510ef7e 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -16,7 +16,7 @@ import { SvgIconProps } from "@mui/material/SvgIcon"; import Tooltip from "@mui/material/Tooltip"; import Typography from "@mui/material/Typography"; import { intersectDependencies } from "mathjs"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import Permission from "ui/editor/Permission"; interface DialogTeamTheme { @@ -135,6 +135,9 @@ export default function LinkDialog(props: DialogProps) { props.linkDialogOpen, ); + useEffect(() => { + setLinkDialogOpen(props.linkDialogOpen); + }, [props.linkDialogOpen]); return ( Date: Wed, 7 Aug 2024 16:21:01 +0100 Subject: [PATCH 31/51] style change for buttons to allow single line txt --- .../src/pages/FlowEditor/components/Sidebar/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 58f36c55b5..6bc14a5d03 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -89,7 +89,7 @@ const ViewButton = styled(Button)(({ theme }) => ({ border: `1px solid ${theme.palette.border.main}`, boxShadow: "none", color: theme.palette.common.black, - width: "35%", + width: "30%", display: "flex", flexDirection: "row", gap: "8px", @@ -321,7 +321,7 @@ const Sidebar: React.FC<{ disabled={!useStore.getState().canUserEditTeam(teamSlug)} onClick={handleCheckForChangesToPublish} > - CHECK FOR CHANGES TO PUBLISH + Check for changes to publish Date: Wed, 7 Aug 2024 16:33:27 +0100 Subject: [PATCH 32/51] reconfig dialog open state to trigger from button --- .../components/Sidebar/LinkDialog.tsx | 42 ++++++++++--------- .../FlowEditor/components/Sidebar/index.tsx | 1 + 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index 380510ef7e..9d94c40e6d 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -15,8 +15,10 @@ import { styled } from "@mui/material/styles"; import { SvgIconProps } from "@mui/material/SvgIcon"; import Tooltip from "@mui/material/Tooltip"; import Typography from "@mui/material/Typography"; +import { link } from "fs"; +import { SetState } from "immer/dist/internal"; import { intersectDependencies } from "mathjs"; -import React, { useEffect, useState } from "react"; +import React, { SetStateAction, useEffect, useState } from "react"; import Permission from "ui/editor/Permission"; interface DialogTeamTheme { @@ -29,6 +31,7 @@ interface DialogBaseProps { flowSlug: string; isFlowPublished: boolean; url: string; + setLinkDialogOpen: React.Dispatch>; } interface DialogPropsWithTheme { @@ -49,6 +52,7 @@ const ImageWrapper = styled(Box)(() => ({ })); const LinkComponent = (props: { + linkType: "published" | "draft" | "subdomain" | "preview"; primaryColour?: string; titleIcon?: string | SvgIconProps; title: string; @@ -117,31 +121,27 @@ const LinkComponent = (props: { - - {props.link}{" "} - + { + + {props.link} + + } {props.description} ); }; export default function LinkDialog(props: DialogProps) { - const [linkDialogOpen, setLinkDialogOpen] = useState( - props.linkDialogOpen, - ); - - useEffect(() => { - setLinkDialogOpen(props.linkDialogOpen); - }, [props.linkDialogOpen]); + console.log(props.linkDialogOpen); return ( setLinkDialogOpen(false)} + open={props.linkDialogOpen} + onClose={() => props.setLinkDialogOpen(false)} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" fullWidth @@ -152,7 +152,7 @@ export default function LinkDialog(props: DialogProps) { variant="text" style={{ boxShadow: "none" }} onClick={() => { - setLinkDialogOpen(false); + props.setLinkDialogOpen(false); }} > @@ -166,6 +166,7 @@ export default function LinkDialog(props: DialogProps) { {props.teamDomain && props.teamTheme ? ( ) : null} } title={"Published flow"} isPublished={props.isFlowPublished} @@ -180,6 +182,7 @@ export default function LinkDialog(props: DialogProps) { description="View of the currently published version of this flow." /> } title={"Preview flow"} link={props.url.replace("/published", "/preview")} @@ -187,6 +190,7 @@ export default function LinkDialog(props: DialogProps) { />{" "} } title={"Draft flow"} link={props.url.replace("/published", "/draft")} diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 6bc14a5d03..6fce31f4eb 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -293,6 +293,7 @@ const Sidebar: React.FC<{ View links Date: Wed, 7 Aug 2024 16:42:29 +0100 Subject: [PATCH 33/51] add logic to only look at last instance --- editor.planx.uk/src/components/Header.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx index 4fe8fe97f3..5b2af62782 100644 --- a/editor.planx.uk/src/components/Header.tsx +++ b/editor.planx.uk/src/components/Header.tsx @@ -584,9 +584,9 @@ const Header: React.FC = () => { const pathnameArray = window.location.pathname.split("/"); useEffect(() => { - const findPathname = pathnameArray.find( - (pathname) => pathname === "preview" || pathname === "draft", - ); + const findPathname = + pathnameArray.pop() === "preview" || pathnameArray.pop() === "draft"; + setIsOutsideEditor(Boolean(findPathname)); }, pathnameArray); From 10fdc7c143d0cfe3b70cc37f68b93b3d4e5c6523 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Thu, 8 Aug 2024 10:49:45 +0100 Subject: [PATCH 34/51] setting up code for new dialog designs --- .../components/Sidebar/LinkDialog.tsx | 32 +++++++++---------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index 9d94c40e6d..7ad2173bde 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -15,10 +15,7 @@ import { styled } from "@mui/material/styles"; import { SvgIconProps } from "@mui/material/SvgIcon"; import Tooltip from "@mui/material/Tooltip"; import Typography from "@mui/material/Typography"; -import { link } from "fs"; -import { SetState } from "immer/dist/internal"; -import { intersectDependencies } from "mathjs"; -import React, { SetStateAction, useEffect, useState } from "react"; +import React, { useState } from "react"; import Permission from "ui/editor/Permission"; interface DialogTeamTheme { @@ -51,6 +48,12 @@ const ImageWrapper = styled(Box)(() => ({ padding: "2px", })); +const InactiveLink = styled(Typography)(({ theme }) => ({ + width: "100%", + textAlign: "left", + color: theme.palette.text.secondary, +})); + const LinkComponent = (props: { linkType: "published" | "draft" | "subdomain" | "preview"; primaryColour?: string; @@ -63,16 +66,7 @@ const LinkComponent = (props: { const [copyMessage, setCopyMessage] = useState<"copy" | "copied">("copy"); return ( - + - { + {props.description} + {} + {props.linkType === "published" && !props.isPublished ? ( + {props.link} + ) : ( {props.link} - } - {props.description} + )} ); }; From ad75b92bbe97dedd495bfba7d9abd9d442d33b5b Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 12 Aug 2024 09:45:16 +0100 Subject: [PATCH 35/51] progress modular components for new publish link structure: --- .../FlowEditor/components/Flow/index.tsx | 2 + .../components/Sidebar/LinkDialog.tsx | 219 +++++++++++------- .../FlowEditor/components/Sidebar/index.tsx | 5 + 3 files changed, 139 insertions(+), 87 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/index.tsx index fc43669d25..1ef876af01 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/index.tsx @@ -24,6 +24,8 @@ const Flow = ({ breadcrumbs = [] }: any) => { href: `${window.location.pathname.split(id)[0]}${id}`, })); + console.log(useStore.getState().flowStatus); + return ( <>
    diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index 7ad2173bde..14916fd95b 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -15,7 +15,11 @@ import { styled } from "@mui/material/styles"; import { SvgIconProps } from "@mui/material/SvgIcon"; import Tooltip from "@mui/material/Tooltip"; import Typography from "@mui/material/Typography"; -import React, { useState } from "react"; +import gql from "graphql-tag"; +import { client } from "lib/graphql"; +import { useStore } from "pages/FlowEditor/lib/store"; +import { prop, props } from "ramda"; +import React, { FC, ReactNode, useEffect, useState } from "react"; import Permission from "ui/editor/Permission"; interface DialogTeamTheme { @@ -25,6 +29,7 @@ interface DialogTeamTheme { interface DialogBaseProps { linkDialogOpen: boolean; + teamSlug: string; flowSlug: string; isFlowPublished: boolean; url: string; @@ -39,32 +44,91 @@ interface DialogPropsWithTheme { type DialogProps = DialogBaseProps & DialogPropsWithTheme; -const ImageWrapper = styled(Box)(() => ({ - height: 24, - width: 24, - display: "flex", - justifyContent: "center", - alignItems: "center", - padding: "2px", -})); - const InactiveLink = styled(Typography)(({ theme }) => ({ width: "100%", textAlign: "left", color: theme.palette.text.secondary, })); -const LinkComponent = (props: { - linkType: "published" | "draft" | "subdomain" | "preview"; - primaryColour?: string; - titleIcon?: string | SvgIconProps; +const PaddedText = styled(Typography)(({ theme }) => ({ + paddingLeft: "31px", +})); + +const CopyButton = (props: any) => { + const [copyMessage, setCopyMessage] = useState<"copy" | "copied">("copy"); + return ( + + + + ); +}; + +const PublishedLink = (props: { + status?: string; + subdomain?: string; + link: string; + isPublished: boolean; +}) => { + return ( + <> + + {"Subdomain"} + + + {props.subdomain} + + + {"Published"} + + + {props.link} + {" "} + + ); +}; + +const BaseLink = (props: { link: string }) => { + return ( + <> + + {props.link} + + + ); +}; + +const LinkContainer = (props: { + subdomain?: string; + titleIcon?: SvgIconProps; title: string; link: string; description?: string; - isPublished?: boolean; + status?: string; + linkComponent: ReactNode; }) => { - const [copyMessage, setCopyMessage] = useState<"copy" | "copied">("copy"); - + const infoPadding = "31px"; return ( - {typeof props.titleIcon === "string" ? ( - - Local authority logo - - ) : ( - <>{props.titleIcon} - )} - + <>{props.titleIcon} {props.title} - - - + - {props.description} - {} - {props.linkType === "published" && !props.isPublished ? ( - {props.link} - ) : ( - - {props.link} - - )} + {props.description} + {props.linkComponent} ); }; export default function LinkDialog(props: DialogProps) { - console.log(props.linkDialogOpen); + const [flowStatus, setFlowStatus] = useState(); + // Retrieving flow status to determine which links to show in View Links + useEffect(() => { + const fetchFlowStatus = async () => { + const { data } = await client.query({ + query: gql` + query GetFlow($slug: String!, $team_slug: String!) { + flows( + limit: 1 + where: { + slug: { _eq: $slug } + team: { slug: { _eq: $team_slug } } + } + ) { + status + } + } + `, + variables: { + slug: props.flowSlug, + team_slug: props.teamSlug, + }, + }); + console.log(); + setFlowStatus(data.flows[0].status); + }; + + fetchFlowStatus(); + }, []); + return ( - {props.teamDomain && props.teamTheme ? ( - - ) : null} - } title={"Published flow"} - isPublished={props.isFlowPublished} link={props.url} description="View of the currently published version of this flow." + linkComponent={ + + } /> - } title={"Preview flow"} link={props.url.replace("/published", "/preview")} description="View of the draft data of the main flow and the latest published version of nested flows. This link is representative of what your next published version will look like." + linkComponent={ + + } />{" "} - } title={"Draft flow"} link={props.url.replace("/published", "/draft")} description="View of the draft data of the main flow and the draft data of nested flows.This link is not representative of what your next published version will look like." + linkComponent={ + + } /> diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index 6fce31f4eb..af94c2fd25 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -24,6 +24,7 @@ import Tooltip from "@mui/material/Tooltip"; import Typography from "@mui/material/Typography"; import { Team } from "@opensystemslab/planx-core/types"; import { AxiosError } from "axios"; +import gql from "graphql-tag"; import { hasFeatureFlag } from "lib/featureFlags"; import { formatLastPublishMessage } from "pages/FlowEditor/utils"; import React, { useCallback, useEffect, useState } from "react"; @@ -31,6 +32,7 @@ import { useAsync } from "react-use"; import Permission from "ui/editor/Permission"; import Input from "ui/shared/Input"; +import { client } from "../../../../lib/graphql"; import Questions from "../../../Preview/Questions"; import { useStore } from "../../lib/store"; import EditHistory from "./EditHistory"; @@ -181,6 +183,7 @@ const Sidebar: React.FC<{ fetchCurrentTeam, togglePreview, flowSlug, + flowStatus, teamSlug, teamTheme, teamDomain, @@ -195,6 +198,7 @@ const Sidebar: React.FC<{ state.fetchCurrentTeam, state.togglePreview, state.flowSlug, + state.flowStatus, state.teamSlug, state.teamTheme, state.teamDomain, @@ -298,6 +302,7 @@ const Sidebar: React.FC<{ linkDialogOpen={linkDialogOpen} teamTheme={teamTheme} teamDomain={teamDomain} + teamSlug={teamSlug} flowSlug={flowSlug} isFlowPublished={isFlowPublished} url={props.url} From e23fdbdb9a81a489dc4077d1291b1d7db892114b Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 12 Aug 2024 11:11:29 +0100 Subject: [PATCH 36/51] refine link comps and types --- .../components/Sidebar/LinkDialog.tsx | 138 ++++++++++-------- 1 file changed, 78 insertions(+), 60 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index 14916fd95b..789e9892fb 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -16,11 +16,10 @@ import { SvgIconProps } from "@mui/material/SvgIcon"; import Tooltip from "@mui/material/Tooltip"; import Typography from "@mui/material/Typography"; import gql from "graphql-tag"; -import { client } from "lib/graphql"; -import { useStore } from "pages/FlowEditor/lib/store"; -import { prop, props } from "ramda"; -import React, { FC, ReactNode, useEffect, useState } from "react"; -import Permission from "ui/editor/Permission"; +import React, { ReactNode, useEffect, useState } from "react"; + +import { client } from "../../../../lib/graphql"; +import Permission from "../../../../ui/editor/Permission"; interface DialogTeamTheme { logo: string | null; @@ -42,6 +41,22 @@ interface DialogPropsWithTheme { teamDomain?: string; } +interface LinkProps { + subdomain?: string; + titleIcon?: SvgIconProps; + title: string; + link: string; + description?: string; + status?: string; + type: "published" | "draft" | "preview"; + isPublished?: boolean; +} + +type PublishedLinkProps = Pick< + LinkProps, + "status" | "subdomain" | "link" | "isPublished" +>; + type DialogProps = DialogBaseProps & DialogPropsWithTheme; const InactiveLink = styled(Typography)(({ theme }) => ({ @@ -70,6 +85,7 @@ const CopyButton = (props: any) => { setCopyMessage("copied"); navigator.clipboard.writeText(props.link); }} + sx={{ marginLeft: "8px" }} > { ); }; -const PublishedLink = (props: { - status?: string; - subdomain?: string; - link: string; - isPublished: boolean; -}) => { - return ( - <> - - {"Subdomain"} - - - {props.subdomain} - - - {"Published"} - - - {props.link} - {" "} - - ); -}; - -const BaseLink = (props: { link: string }) => { +const PublishedLink = (props: PublishedLinkProps) => { return ( <> - - {props.link} - + {props.subdomain && props.status === "online" ? ( + <> + {" "} + + {"Subdomain"} + + + + {props.subdomain} + {" "} + + ) : ( + <> + {" "} + {"Subdomain"} + + {"There is not a subdomain configured for this team"} + {" "} + + )} + {props.isPublished && props.status === "online" ? ( + <> + + {"Published"} + + + + {props.link} + {" "} + + ) : ( + <> + {"Published"} + {props.link}{" "} + + )} ); }; -const LinkContainer = (props: { - subdomain?: string; - titleIcon?: SvgIconProps; - title: string; - link: string; - description?: string; - status?: string; - linkComponent: ReactNode; -}) => { +const LinkContainer = (props: LinkProps) => { const infoPadding = "31px"; return ( @@ -138,13 +155,24 @@ const LinkContainer = (props: { gap={"7px"} > <>{props.titleIcon} - + {props.title} - + {props.type !== "published" && } {props.description} - {props.linkComponent} + {props.type === "published" ? ( + + ) : ( + + {props.link} + + )} ); }; @@ -173,7 +201,6 @@ export default function LinkDialog(props: DialogProps) { team_slug: props.teamSlug, }, }); - console.log(); setFlowStatus(data.flows[0].status); }; @@ -211,23 +238,16 @@ export default function LinkDialog(props: DialogProps) { title={"Published flow"} link={props.url} description="View of the currently published version of this flow." - linkComponent={ - - } + type="published" + isPublished={props.isFlowPublished} + status={flowStatus} /> } title={"Preview flow"} link={props.url.replace("/published", "/preview")} description="View of the draft data of the main flow and the latest published version of nested flows. This link is representative of what your next published version will look like." - linkComponent={ - - } + type="preview" />{" "} - } + type="draft" /> From 4df96053fa9c27e252d3816816408c8ef8755a28 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 12 Aug 2024 11:23:37 +0100 Subject: [PATCH 37/51] refactor header logic which creates new array instead of mutating current --- editor.planx.uk/src/components/Header.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx index 5b2af62782..3ecf77297b 100644 --- a/editor.planx.uk/src/components/Header.tsx +++ b/editor.planx.uk/src/components/Header.tsx @@ -585,7 +585,8 @@ const Header: React.FC = () => { useEffect(() => { const findPathname = - pathnameArray.pop() === "preview" || pathnameArray.pop() === "draft"; + pathnameArray.slice(-1)[0] === "preview" || + pathnameArray.slice(-1)[0] === "draft"; setIsOutsideEditor(Boolean(findPathname)); }, pathnameArray); From b1b5f23da7c256f747c00856c611bf72ba148281 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 12 Aug 2024 11:45:49 +0100 Subject: [PATCH 38/51] stylin updates --- .../components/Sidebar/LinkDialog.tsx | 60 +++++++++++-------- 1 file changed, 34 insertions(+), 26 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index 789e9892fb..25c5314842 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -69,6 +69,12 @@ const PaddedText = styled(Typography)(({ theme }) => ({ paddingLeft: "31px", })); +const LinkBox = styled(Box)(({ theme }) => ({ + display: "flex", + flexDirection: "column", + gap: "10px", +})); + const CopyButton = (props: any) => { const [copyMessage, setCopyMessage] = useState<"copy" | "copied">("copy"); return ( @@ -91,9 +97,9 @@ const CopyButton = (props: any) => { display={"flex"} flexDirection={"row"} gap={"4px"} - variant="body2" + variant="body3" > - + {copyMessage} @@ -103,9 +109,9 @@ const CopyButton = (props: any) => { const PublishedLink = (props: PublishedLinkProps) => { return ( - <> + {props.subdomain && props.status === "online" ? ( - <> + {" "} {"Subdomain"} @@ -114,18 +120,18 @@ const PublishedLink = (props: PublishedLinkProps) => { {props.subdomain} {" "} - + ) : ( - <> + {" "} {"Subdomain"} {"There is not a subdomain configured for this team"} {" "} - + )} {props.isPublished && props.status === "online" ? ( - <> + {"Published"} @@ -133,34 +139,36 @@ const PublishedLink = (props: PublishedLinkProps) => { {props.link} {" "} - + ) : ( - <> + {"Published"} {props.link}{" "} - + )} - + ); }; const LinkContainer = (props: LinkProps) => { const infoPadding = "31px"; return ( - - - <>{props.titleIcon} - - {props.title} - - {props.type !== "published" && } - - {props.description} + + + + <>{props.titleIcon} + + {props.title} + + {props.type !== "published" && } + + {props.description} + {props.type === "published" ? ( Date: Mon, 12 Aug 2024 11:58:39 +0100 Subject: [PATCH 39/51] tidying types, props, and imported modules --- .../components/Sidebar/LinkDialog.tsx | 18 +++------------ .../FlowEditor/components/Sidebar/index.tsx | 22 +------------------ 2 files changed, 4 insertions(+), 36 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index 25c5314842..1995b51539 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -16,18 +16,14 @@ import { SvgIconProps } from "@mui/material/SvgIcon"; import Tooltip from "@mui/material/Tooltip"; import Typography from "@mui/material/Typography"; import gql from "graphql-tag"; -import React, { ReactNode, useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; import { client } from "../../../../lib/graphql"; import Permission from "../../../../ui/editor/Permission"; -interface DialogTeamTheme { - logo: string | null; - primaryColour: string; -} - interface DialogBaseProps { linkDialogOpen: boolean; + teamDomain?: string; teamSlug: string; flowSlug: string; isFlowPublished: boolean; @@ -35,12 +31,6 @@ interface DialogBaseProps { setLinkDialogOpen: React.Dispatch>; } -interface DialogPropsWithTheme { - containsTheme: true; - teamTheme: DialogTeamTheme; - teamDomain?: string; -} - interface LinkProps { subdomain?: string; titleIcon?: SvgIconProps; @@ -57,8 +47,6 @@ type PublishedLinkProps = Pick< "status" | "subdomain" | "link" | "isPublished" >; -type DialogProps = DialogBaseProps & DialogPropsWithTheme; - const InactiveLink = styled(Typography)(({ theme }) => ({ width: "100%", textAlign: "left", @@ -185,7 +173,7 @@ const LinkContainer = (props: LinkProps) => { ); }; -export default function LinkDialog(props: DialogProps) { +export default function LinkDialog(props: DialogBaseProps) { const [flowStatus, setFlowStatus] = useState(); // Retrieving flow status to determine which links to show in View Links useEffect(() => { diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index af94c2fd25..ccdbc115d0 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -1,10 +1,4 @@ -import ChevronRightRounded from "@mui/icons-material/ChevronRightRounded"; -import CloseIcon from "@mui/icons-material/Close"; -import ContentCopyIcon from "@mui/icons-material/ContentCopy"; -import LanguageIcon from "@mui/icons-material/Language"; import LinkIcon from "@mui/icons-material/Link"; -import OpenInNewIcon from "@mui/icons-material/OpenInNew"; -import OpenInNewOffIcon from "@mui/icons-material/OpenInNewOff"; import Badge from "@mui/material/Badge"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; @@ -13,26 +7,18 @@ import Dialog from "@mui/material/Dialog"; import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; import DialogTitle from "@mui/material/DialogTitle"; -import Divider from "@mui/material/Divider"; import Link from "@mui/material/Link"; -import Stack from "@mui/material/Stack"; import { styled } from "@mui/material/styles"; -import { SvgIconProps } from "@mui/material/SvgIcon"; 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 { Team } from "@opensystemslab/planx-core/types"; import { AxiosError } from "axios"; -import gql from "graphql-tag"; import { hasFeatureFlag } from "lib/featureFlags"; import { formatLastPublishMessage } from "pages/FlowEditor/utils"; -import React, { useCallback, useEffect, useState } from "react"; +import React, { useState } from "react"; import { useAsync } from "react-use"; -import Permission from "ui/editor/Permission"; import Input from "ui/shared/Input"; -import { client } from "../../../../lib/graphql"; import Questions from "../../../Preview/Questions"; import { useStore } from "../../lib/store"; import EditHistory from "./EditHistory"; @@ -183,9 +169,7 @@ const Sidebar: React.FC<{ fetchCurrentTeam, togglePreview, flowSlug, - flowStatus, teamSlug, - teamTheme, teamDomain, ] = useStore((state) => [ state.id, @@ -198,9 +182,7 @@ const Sidebar: React.FC<{ state.fetchCurrentTeam, state.togglePreview, state.flowSlug, - state.flowStatus, state.teamSlug, - state.teamTheme, state.teamDomain, ]); const [key, setKey] = useState(false); @@ -298,9 +280,7 @@ const Sidebar: React.FC<{ Date: Mon, 12 Aug 2024 12:23:28 +0100 Subject: [PATCH 40/51] add console and refresh buttons --- .../FlowEditor/components/Sidebar/index.tsx | 42 ++++++++++++++++--- 1 file changed, 36 insertions(+), 6 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index ccdbc115d0..e5811a176e 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -1,4 +1,6 @@ import LinkIcon from "@mui/icons-material/Link"; +import MenuOpenIcon from "@mui/icons-material/MenuOpen"; +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"; @@ -7,10 +9,12 @@ import Dialog from "@mui/material/Dialog"; import DialogActions from "@mui/material/DialogActions"; import DialogContent from "@mui/material/DialogContent"; import DialogTitle from "@mui/material/DialogTitle"; +import IconButton from "@mui/material/IconButton"; import Link from "@mui/material/Link"; 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 { AxiosError } from "axios"; import { hasFeatureFlag } from "lib/featureFlags"; @@ -72,6 +76,10 @@ const Header = styled("header")(({ theme }) => ({ }, })); +const SecondaryButton = styled(IconButton)(({ theme }) => ({ + color: theme.palette.common.black, +})); + const ViewButton = styled(Button)(({ theme }) => ({ background: theme.palette.common.white, border: `1px solid ${theme.palette.border.main}`, @@ -262,15 +270,42 @@ const Sidebar: React.FC<{ return (
    + + + + { + resetPreview(); + setKey((a) => !a); + }} + /> + + + + + setDebugConsoleVisibility(!showDebugConsole)} + /> + + + setLinkDialogOpen(true)} @@ -288,12 +323,7 @@ const Sidebar: React.FC<{ url={props.url} /> - + Date: Mon, 12 Aug 2024 12:43:31 +0100 Subject: [PATCH 41/51] create logic for published descriptions and service settings nav --- .../components/Sidebar/LinkDialog.tsx | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index 1995b51539..bdc22b77e5 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -156,6 +156,14 @@ const LinkContainer = (props: LinkProps) => { {props.type !== "published" && } {props.description} + {props.status === "offline" && props.type === "published" && ( + + You can switch it to “Online” in your{" "} + + Service Settings + + + )} {props.type === "published" ? ( } title={"Published flow"} link={props.url} - description="View of the currently published version of this flow." + description={ + !props.isFlowPublished && flowStatus !== "online" + ? unpublishedOfflineDescription + : props.isFlowPublished && flowStatus !== "online" + ? publishedOfflineDescription + : publishedOnlineDescription + } type="published" isPublished={props.isFlowPublished} status={flowStatus} From 2949ae0046eeb5e9ce1a5d0b3f019871c7f846f0 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 12 Aug 2024 13:22:17 +0100 Subject: [PATCH 42/51] adjust publish link comp structure and logic --- .../components/Sidebar/LinkDialog.tsx | 68 ++++++++++--------- .../FlowEditor/components/Sidebar/index.tsx | 2 +- 2 files changed, 36 insertions(+), 34 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index bdc22b77e5..36c70f7bbd 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -95,44 +95,45 @@ const CopyButton = (props: any) => { ); }; -const PublishedLink = (props: PublishedLinkProps) => { +const InactivePublishedLink = (props: any) => { + return ( + + {" "} + {props.title} + {props.message}{" "} + + ); +}; + +const ActivePublishedLink = (props: any) => { + return ( + + {" "} + {props.title} + {props.link} + + ); +}; + +const PublishedLinkContent = (props: PublishedLinkProps) => { return ( - {props.subdomain && props.status === "online" ? ( - - {" "} - - {"Subdomain"} - - - - {props.subdomain} - {" "} - + {props.subdomain && props.status === "online" && props.isPublished ? ( + + ) : props.subdomain && props.status === "online" && !props.isPublished ? ( + + ) : props.subdomain && props.status === "offline" && props.isPublished ? ( + ) : ( - - {" "} - {"Subdomain"} - - {"There is not a subdomain configured for this team"} - {" "} - + )} {props.isPublished && props.status === "online" ? ( - - - {"Published"} - - - - {props.link} - {" "} - + ) : ( - - {"Published"} - {props.link}{" "} - + )} ); @@ -166,7 +167,7 @@ const LinkContainer = (props: LinkProps) => { )} {props.type === "published" ? ( - } diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index e5811a176e..a605f78512 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -85,7 +85,7 @@ const ViewButton = styled(Button)(({ theme }) => ({ border: `1px solid ${theme.palette.border.main}`, boxShadow: "none", color: theme.palette.common.black, - width: "30%", + width: "33%", display: "flex", flexDirection: "row", gap: "8px", From e1171adf19330eb15c291b3e0d8c066038aa1104 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 12 Aug 2024 13:33:55 +0100 Subject: [PATCH 43/51] add href to Link comp --- .../src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index 36c70f7bbd..4e72f972ae 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -110,7 +110,9 @@ const ActivePublishedLink = (props: any) => { {" "} {props.title} - {props.link} + + {props.link} + ); }; From 34bfdc2f291d7bb90aa18e55794d5029af08e275 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 12 Aug 2024 13:45:00 +0100 Subject: [PATCH 44/51] add copybutton to published link comp --- .../src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index 4e72f972ae..39388aea3f 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -109,7 +109,9 @@ const ActivePublishedLink = (props: any) => { return ( {" "} - {props.title} + + {props.title} + {props.link} From e9b241b788f0092fcefa87ebab056b30167c4cb3 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 12 Aug 2024 13:57:00 +0100 Subject: [PATCH 45/51] add flowSlug to subdomain --- .../src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index 39388aea3f..02232da4e2 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -265,7 +265,7 @@ export default function LinkDialog(props: DialogBaseProps) { type="published" isPublished={props.isFlowPublished} status={flowStatus} - subdomain={props.teamDomain} + subdomain={`${props.teamDomain}/${props.flowSlug}`} /> } From 9e2f4717dfd9567d527b2e1562ebd5f48e6d175c Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 12 Aug 2024 14:10:25 +0100 Subject: [PATCH 46/51] only make subdomain truthy if teamDomain exists logic added --- .../src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index 02232da4e2..465ab6ae28 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -265,7 +265,9 @@ export default function LinkDialog(props: DialogBaseProps) { type="published" isPublished={props.isFlowPublished} status={flowStatus} - subdomain={`${props.teamDomain}/${props.flowSlug}`} + subdomain={ + props.teamDomain && `${props.teamDomain}/${props.flowSlug}` + } /> } From 25f147064477daaea087978cdc5fa5d4db945748 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 12 Aug 2024 14:14:08 +0100 Subject: [PATCH 47/51] refine text of links --- .../pages/FlowEditor/components/Sidebar/LinkDialog.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index 465ab6ae28..f624a34a4c 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -253,7 +253,7 @@ export default function LinkDialog(props: DialogBaseProps) { } - title={"Published flow"} + title={"Published"} link={props.url} description={ !props.isFlowPublished && flowStatus !== "online" @@ -271,17 +271,17 @@ export default function LinkDialog(props: DialogBaseProps) { /> } - title={"Preview flow"} + title={"Preview"} link={props.url.replace("/published", "/preview")} - description="View of the draft data of the main flow and the latest published version of nested flows. This link is representative of what your next published version will look like." + description="The draft data of the main flow and the latest published version of nested flows. This link is representative of what your next published version will look like." type="preview" />{" "} } - title={"Draft flow"} + title={"Draft"} link={props.url.replace("/published", "/draft")} - description="View of the draft data of the main flow and the draft data of nested flows.This link is not representative of what your next published version will look like." + description="The draft data of the main flow and the draft data of nested flows.This link is not representative of what your next published version will look like." type="draft" /> From 6283e6674eab6e5297ed3088c71fa54ba893bf97 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 12 Aug 2024 14:29:20 +0100 Subject: [PATCH 48/51] adjust text for links --- .../components/Sidebar/LinkDialog.tsx | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index f624a34a4c..e0a3a6f6e3 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -123,14 +123,20 @@ const PublishedLinkContent = (props: PublishedLinkProps) => { return ( {props.subdomain && props.status === "online" && props.isPublished ? ( - + ) : props.subdomain && props.status === "online" && !props.isPublished ? ( - + ) : props.subdomain && props.status === "offline" && props.isPublished ? ( - + ) : ( )} @@ -223,7 +229,7 @@ export default function LinkDialog(props: DialogBaseProps) { "The published version of this flow. It is not yet viewable by the public."; const publishedOnlineDescription = - "This flow has been published and is viewable by the public."; + "The published version of the flow that is viewable by the public."; return ( } title={"Preview"} link={props.url.replace("/published", "/preview")} - description="The draft data of the main flow and the latest published version of nested flows. This link is representative of what your next published version will look like." + description="This link is representative of what your next published version will look like. It contains the draft data of the main flow and the latest published version of nested flows. " type="preview" />{" "} @@ -281,7 +287,7 @@ export default function LinkDialog(props: DialogBaseProps) { titleIcon={} title={"Draft"} link={props.url.replace("/published", "/draft")} - description="The draft data of the main flow and the draft data of nested flows.This link is not representative of what your next published version will look like." + description="This link is not representative of what your next published version will look like. It contains the draft data of the main flow and the draft data of nested flows." type="draft" /> From 606c00d53877ba22be221e5d06c5a1076b383e53 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 12 Aug 2024 14:59:09 +0100 Subject: [PATCH 49/51] switch local state to global state for flow status --- .../src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index e0a3a6f6e3..99b4421cf2 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -16,6 +16,7 @@ import { SvgIconProps } from "@mui/material/SvgIcon"; import Tooltip from "@mui/material/Tooltip"; import Typography from "@mui/material/Typography"; import gql from "graphql-tag"; +import { useStore } from "pages/FlowEditor/lib/store"; import React, { useEffect, useState } from "react"; import { client } from "../../../../lib/graphql"; @@ -193,7 +194,10 @@ const LinkContainer = (props: LinkProps) => { }; export default function LinkDialog(props: DialogBaseProps) { - const [flowStatus, setFlowStatus] = useState(); + const [setFlowStatus, flowStatus] = useStore((state) => [ + state.setFlowStatus, + state.flowStatus, + ]); // Retrieving flow status to determine which links to show in View Links useEffect(() => { const fetchFlowStatus = async () => { From adffcbf52ac88b8edc09e945e846901743919999 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Mon, 12 Aug 2024 16:48:18 +0100 Subject: [PATCH 50/51] swap debug console icon as it was same as toggle --- .../src/pages/FlowEditor/components/Sidebar/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index a605f78512..ae9a28fedb 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -1,6 +1,8 @@ +import AccountTreeIcon from "@mui/icons-material/AccountTree"; import LinkIcon from "@mui/icons-material/Link"; import MenuOpenIcon from "@mui/icons-material/MenuOpen"; import RefreshIcon from "@mui/icons-material/Refresh"; +import SchemaIcon from "@mui/icons-material/Schema"; import Badge from "@mui/material/Badge"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; @@ -289,7 +291,7 @@ const Sidebar: React.FC<{ - setDebugConsoleVisibility(!showDebugConsole)} /> From 2cd239c9a4e90c4efc1098187536ef10a9e6cb82 Mon Sep 17 00:00:00 2001 From: Rory Doak Date: Tue, 13 Aug 2024 12:01:19 +0100 Subject: [PATCH 51/51] alter button styling to match global button style --- .../FlowEditor/components/Sidebar/LinkDialog.tsx | 3 +++ .../src/pages/FlowEditor/components/Sidebar/index.tsx | 11 +++++++---- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx index 99b4421cf2..4e003ce185 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/LinkDialog.tsx @@ -229,6 +229,9 @@ export default function LinkDialog(props: DialogBaseProps) { const unpublishedOfflineDescription = "The flow is not yet published and is not yet viewable by the public."; + const unpublishedOnlineDescription = + "The flow is not yet published and is not viewable by the public"; + const publishedOfflineDescription = "The published version of this flow. It is not yet viewable by the public."; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx index ae9a28fedb..a54579eb92 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx @@ -87,12 +87,15 @@ const ViewButton = styled(Button)(({ theme }) => ({ border: `1px solid ${theme.palette.border.main}`, boxShadow: "none", color: theme.palette.common.black, - width: "33%", + width: "30%", display: "flex", flexDirection: "row", gap: "8px", - borderRadius: "5px", + borderRadius: "3px", padding: "8px", + "&:hover": { + boxShadow: "none", + }, })); const TabList = styled(Box)(({ theme }) => ({ @@ -305,9 +308,9 @@ const Sidebar: React.FC<{ pr={2} display="flex" flexDirection="row" - gap={"24px"} + gap={"10px"} style={{ position: "relative" }} - justifyContent={"space-between"} + justifyContent={"space-around"} > setLinkDialogOpen(true)}