From 23443cd56de9ea9dc5a7792f61bef40c263ad014 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Wed, 17 Apr 2024 10:58:47 +0100 Subject: [PATCH 01/16] feat: Editor sidebar menu --- .../src/components/TestEnvironmentBanner.tsx | 3 +- .../FlowEditor/components/EditorMenu.tsx | 117 ++++++++++++++++++ .../src/pages/FlowEditor/floweditor.scss | 6 - .../src/pages/FlowEditor/index.tsx | 25 +++- .../src/pages/layout/FlowEditorLayout.tsx | 26 ++++ .../src/routes/views/flowEditor.tsx | 85 +++++++++++++ 6 files changed, 250 insertions(+), 12 deletions(-) create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx create mode 100644 editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx create mode 100644 editor.planx.uk/src/routes/views/flowEditor.tsx diff --git a/editor.planx.uk/src/components/TestEnvironmentBanner.tsx b/editor.planx.uk/src/components/TestEnvironmentBanner.tsx index d469fba812..4e30464498 100644 --- a/editor.planx.uk/src/components/TestEnvironmentBanner.tsx +++ b/editor.planx.uk/src/components/TestEnvironmentBanner.tsx @@ -8,7 +8,8 @@ import { visuallyHidden } from "@mui/utils"; import React, { useState } from "react"; const TestEnvironmentWarning = styled(Box)(({ theme }) => ({ - display: "flex", + // Temporarily hide + display: "none", backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, justifyContent: "space-between", diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx new file mode 100644 index 0000000000..9218c367e4 --- /dev/null +++ b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx @@ -0,0 +1,117 @@ +import EqualizerIcon from '@mui/icons-material/Equalizer'; +import FlagIcon from '@mui/icons-material/Flag'; +import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'; +import IosShareIcon from '@mui/icons-material/IosShare'; +import PeopleIcon from '@mui/icons-material/People'; +import RuleFolderIcon from '@mui/icons-material/RuleFolder'; +import ShareIcon from '@mui/icons-material/Share'; +import Box from "@mui/material/Box"; +import IconButton from '@mui/material/IconButton'; +import { styled } from "@mui/material/styles"; +import Tooltip, { tooltipClasses,TooltipProps } from '@mui/material/Tooltip'; +import React from "react"; + +const MENU_WIDTH = "46px"; + +const Root = styled(Box)(({ theme }) => ({ + width: MENU_WIDTH, + flexShrink: 0, + background: theme.palette.background.paper, + borderRight:`1px solid ${theme.palette.border.main}`, +})); + +const MenuWrap = styled("ul")(({ theme }) => ({ + listStyle: "none", + margin: 0, + padding: theme.spacing(6, 0, 0, 0), +})); + +const MenuItem = styled("li")(({ theme }) => ({ + margin: theme.spacing(0.75, 0), + padding: 0, +})); + +const TooltipWrap = styled(({ className, ...props }: TooltipProps) => ( + +))(({ theme }) => ({ + [`& .${tooltipClasses.arrow}`]: { + color: theme.palette.common.black, + }, + [`& .${tooltipClasses.tooltip}`]: { + backgroundColor: theme.palette.common.black, + left: "-5px", + fontSize: "0.875em", + }, +})); + +const MenuButton = styled(IconButton)(({ theme }) => ({ + color: theme.palette.primary.main, + width: MENU_WIDTH, + height: MENU_WIDTH, + "&[data-state='active']": { + background: theme.palette.common.white, + color: theme.palette.text.primary, + border: `1px solid ${theme.palette.border.main}`, + borderRight: "none", + }, +})); + +function EditorMenu() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default EditorMenu; diff --git a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss index 7cde130e1c..50f12b90e9 100644 --- a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss +++ b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss @@ -38,12 +38,6 @@ $fontMonospace: "Source Code Pro", monospace; // ------------------------------------------------ -#editor-container { - flex: 1; - display: flex; - overflow: hidden; -} - #editor { flex: 1; overflow: auto; diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx index 8905a3667f..87f168aa5a 100644 --- a/editor.planx.uk/src/pages/FlowEditor/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/index.tsx @@ -4,6 +4,8 @@ import "./floweditor.scss"; import { gql, useSubscription } from "@apollo/client"; import UndoOutlined from "@mui/icons-material/UndoOutlined"; import Box from "@mui/material/Box"; +import Link from "@mui/material/Link"; +import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import { formatOps } from "@planx/graph"; import { OT } from "@planx/graph/types"; @@ -12,10 +14,12 @@ import { formatDistanceToNow } from "date-fns"; import React, { useRef } from "react"; import { rootFlowPath } from "../../routes/utils"; +import EditorMenu from "./components/EditorMenu"; import Flow from "./components/Flow"; import PreviewBrowser from "./components/PreviewBrowser"; import { useStore } from "./lib/store"; import useScrollControlsAndRememberPosition from "./lib/useScrollControlsAndRememberPosition"; +import EditNoteIcon from '@mui/icons-material/EditNote'; interface Operation { id: string; @@ -33,6 +37,12 @@ const formatLastEditDate = (date: string): string => { addSuffix: true, }); }; +const EditorContainer = styled(Box)(() => ({ + display: "flex", + alignItems: "stretch", + overflow: "hidden", + flexGrow: 1, +})); const formatLastEditMessage = ( date: string, @@ -94,16 +104,21 @@ export const LastEdited = () => { return ( ({ - padding: theme.spacing(1), + backgroundColor: theme.palette.grey[200], + borderBottom: `1px solid ${theme.palette.border.main}`, + padding: theme.spacing(0.5, 1), paddingLeft: theme.spacing(2), + display: "flex", + alignItems: "center", [theme.breakpoints.up("md")]: { - paddingLeft: theme.spacing(3), + paddingLeft: theme.spacing(2), }, })} > {message} + View edit history ); }; @@ -197,7 +212,7 @@ const FlowEditor: React.FC = ({ flow, breadcrumbs }) => { const showPreview = useStore((state) => state.showPreview); return ( - + = ({ flow, breadcrumbs }) => { url={`${window.location.origin}${rootFlowPath(false)}/published`} /> )} - + ); }; -export default FlowEditor; +export default FlowEditor; \ No newline at end of file diff --git a/editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx b/editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx new file mode 100644 index 0000000000..eb74507ff7 --- /dev/null +++ b/editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx @@ -0,0 +1,26 @@ +import React, { PropsWithChildren } from "react"; +import EditorMenu from "pages/FlowEditor/components/EditorMenu"; +import Box from "@mui/material/Box"; +import { styled } from "@mui/material/styles"; +import { ErrorBoundary } from "react-error-boundary"; +import ErrorFallback from "components/ErrorFallback"; + +const Root = styled(Box)(() => ({ + display: "flex", + alignItems: "stretch", + overflow: "hidden", + flexGrow: 1, +})) + +const FlowEditorLayout: React.FC = ({ children }) => ( + + + + {children} + + +); + +export default FlowEditorLayout; + + diff --git a/editor.planx.uk/src/routes/views/flowEditor.tsx b/editor.planx.uk/src/routes/views/flowEditor.tsx new file mode 100644 index 0000000000..ee1db590d3 --- /dev/null +++ b/editor.planx.uk/src/routes/views/flowEditor.tsx @@ -0,0 +1,85 @@ +import { gql } from "@apollo/client"; +import { NaviRequest, NotFoundError } from "navi"; +import React from "react"; +import { View } from "react-navi"; + +import { client } from "../../lib/graphql"; +import { useStore } from "../../pages/FlowEditor/lib/store"; +import type { FlowSettings } from "../../types"; +import FlowEditorLayout from "pages/layout/FlowEditorLayout"; + +interface FlowMetadata { + flowSettings: FlowSettings; + flowAnalyticsLink: string; + isFlowPublished: boolean; +} + +interface GetFlowMetadata { + flows: { + flowSettings: FlowSettings; + flowAnalyticsLink: string; + publishedFlowsAggregate: { + aggregate: { + count: number; + }; + }; + }[]; +} + +const getFlowMetadata = async ( + flowSlug: string, + team: string, +): Promise => { + const { + data: { flows }, + } = await client.query({ + query: gql` + query GetFlow($slug: String!, $team_slug: String!) { + flows( + limit: 1 + where: { slug: { _eq: $slug }, team: { slug: { _eq: $team_slug } } } + ) { + id + flowSettings: settings + flowAnalyticsLink: analytics_link + publishedFlowsAggregate: published_flows_aggregate { + aggregate { + count + } + } + } + } + `, + variables: { + slug: flowSlug, + team_slug: team, + }, + }); + + const flow = flows[0]; + if (!flows) throw new NotFoundError(`Flow ${flowSlug} not found for ${team}`); + + const metadata = { + flowSettings: flow.flowSettings, + flowAnalyticsLink: flow.flowAnalyticsLink, + isFlowPublished: flow.publishedFlowsAggregate?.aggregate.count > 0, + }; + return metadata; +}; + + +/** + * View wrapper for all flowEditor routes + */ +export const flowEditorView = async (req: NaviRequest) => { + const [ flow ] = req.params.flow.split(","); + const { flowSettings, flowAnalyticsLink, isFlowPublished } = + await getFlowMetadata(flow, req.params.team); + useStore.setState({ flowSettings, flowAnalyticsLink, isFlowPublished }); + + return ( + + + + ); +}; From e8805bfd23e3f3bb1773a7fe5ba7dd0e959f8335 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Thu, 18 Apr 2024 10:30:24 +0100 Subject: [PATCH 02/16] feat: Refine styling for sidebar menu --- .../FlowEditor/components/EditorMenu.tsx | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx index 9218c367e4..54f287a52f 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx @@ -10,6 +10,7 @@ import IconButton from '@mui/material/IconButton'; import { styled } from "@mui/material/styles"; import Tooltip, { tooltipClasses,TooltipProps } from '@mui/material/Tooltip'; import React from "react"; +import { FONT_WEIGHT_SEMI_BOLD } from 'theme'; const MENU_WIDTH = "46px"; @@ -23,7 +24,7 @@ const Root = styled(Box)(({ theme }) => ({ const MenuWrap = styled("ul")(({ theme }) => ({ listStyle: "none", margin: 0, - padding: theme.spacing(6, 0, 0, 0), + padding: theme.spacing(5, 0, 0, 0), })); const MenuItem = styled("li")(({ theme }) => ({ @@ -33,14 +34,16 @@ const MenuItem = styled("li")(({ theme }) => ({ const TooltipWrap = styled(({ className, ...props }: TooltipProps) => ( -))(({ theme }) => ({ +))(() => ({ [`& .${tooltipClasses.arrow}`]: { - color: theme.palette.common.black, + color: "#2c2c2c", }, [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: theme.palette.common.black, + backgroundColor: "#2c2c2c", left: "-5px", - fontSize: "0.875em", + fontSize: "0.8em", + borderRadius: 0, + fontWeight: FONT_WEIGHT_SEMI_BOLD, }, })); @@ -48,11 +51,18 @@ const MenuButton = styled(IconButton)(({ theme }) => ({ color: theme.palette.primary.main, width: MENU_WIDTH, height: MENU_WIDTH, + border: "1px solid transparent", + borderRightColor: theme.palette.border.main, + "&:hover": { + background: "white", + borderTopColor: theme.palette.border.light, + borderBottomColor: theme.palette.border.light, + }, "&[data-state='active']": { background: theme.palette.common.white, color: theme.palette.text.primary, border: `1px solid ${theme.palette.border.main}`, - borderRight: "none", + borderRightColor: "transparent", }, })); From ec5ee503f722254609a802e4eadeed81df74f904 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Thu, 18 Apr 2024 10:35:39 +0100 Subject: [PATCH 03/16] fix: Analytics typo --- editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx index 54f287a52f..34a8b314ad 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx @@ -85,7 +85,7 @@ function EditorMenu() { - + From fa1ed1d039feea2afa06c5031a7284fb159ef6ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Fri, 26 Apr 2024 13:31:24 +0100 Subject: [PATCH 04/16] chore: Move testing banner to header --- editor.planx.uk/src/components/Header.tsx | 1 + editor.planx.uk/src/components/TestEnvironmentBanner.tsx | 2 -- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx index b5a6acd96d..277461b41e 100644 --- a/editor.planx.uk/src/components/Header.tsx +++ b/editor.planx.uk/src/components/Header.tsx @@ -494,6 +494,7 @@ const EditorToolbar: React.FC<{ + {user && ( ({ - // Temporarily hide - display: "none", backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary, justifyContent: "space-between", From 9b32bcbb5a581403299d651ce02cd69f878d0122 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Fri, 26 Apr 2024 13:32:19 +0100 Subject: [PATCH 05/16] chore: Move EditorMenu, use config array --- .../FlowEditor/components/EditorMenu.tsx | 108 +++++++++--------- .../src/pages/FlowEditor/index.tsx | 1 - 2 files changed, 52 insertions(+), 57 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx index 34a8b314ad..a10e477771 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx @@ -1,15 +1,15 @@ -import EqualizerIcon from '@mui/icons-material/Equalizer'; import FlagIcon from '@mui/icons-material/Flag'; import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'; -import IosShareIcon from '@mui/icons-material/IosShare'; -import PeopleIcon from '@mui/icons-material/People'; +import DataObject from '@mui/icons-material/DataObject'; +import Article from '@mui/icons-material/Article'; import RuleFolderIcon from '@mui/icons-material/RuleFolder'; -import ShareIcon from '@mui/icons-material/Share'; import Box from "@mui/material/Box"; import IconButton from '@mui/material/IconButton'; import { styled } from "@mui/material/styles"; import Tooltip, { tooltipClasses,TooltipProps } from '@mui/material/Tooltip'; import React from "react"; +import { useCurrentRoute, useNavigation } from 'react-navi'; +import { rootFlowPath } from 'routes/utils'; import { FONT_WEIGHT_SEMI_BOLD } from 'theme'; const MENU_WIDTH = "46px"; @@ -47,7 +47,9 @@ const TooltipWrap = styled(({ className, ...props }: TooltipProps) => ( }, })); -const MenuButton = styled(IconButton)(({ theme }) => ({ +const MenuButton = styled(IconButton, { + shouldForwardProp: (prop) => prop !== "isActive", +})<{ isActive: boolean }>(({ theme, isActive }) => ({ color: theme.palette.primary.main, width: MENU_WIDTH, height: MENU_WIDTH, @@ -58,67 +60,61 @@ const MenuButton = styled(IconButton)(({ theme }) => ({ borderTopColor: theme.palette.border.light, borderBottomColor: theme.palette.border.light, }, - "&[data-state='active']": { + ...(isActive && { background: theme.palette.common.white, color: theme.palette.text.primary, border: `1px solid ${theme.palette.border.main}`, borderRightColor: "transparent", - }, + }), })); function EditorMenu() { + const { navigate } = useNavigation(); + const { lastChunk } = useCurrentRoute(); + const rootPath = rootFlowPath(); + + const isActive = (route: string) => lastChunk.url.pathname.endsWith(route); + + const routes = [ + { + title: "Editor", + icon: , + route: "/", + }, + { + title: "Service", + icon:
, + route: "/service", + }, + { + title: "Service Flags", + icon: , + route: "/service-flags", + }, + { + title: "Data", + icon: , + route: "/data", + }, + { + title: "Submissions log", + icon: , + route: "/submissions-log", + }, + ]; + return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {routes.map(({ title, icon, route }) => ( + navigate(rootPath + route)}> + + + {icon} + + + + ))} ); diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx index 87f168aa5a..089c87965f 100644 --- a/editor.planx.uk/src/pages/FlowEditor/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/index.tsx @@ -14,7 +14,6 @@ import { formatDistanceToNow } from "date-fns"; import React, { useRef } from "react"; import { rootFlowPath } from "../../routes/utils"; -import EditorMenu from "./components/EditorMenu"; import Flow from "./components/Flow"; import PreviewBrowser from "./components/PreviewBrowser"; import { useStore } from "./lib/store"; From 1221d6a4118ec08d21d63c4aaf5dd83acb4e1518 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Fri, 26 Apr 2024 13:33:00 +0100 Subject: [PATCH 06/16] feat: Setup routes and views --- editor.planx.uk/src/routes/flow.tsx | 133 +++++++++++----------------- 1 file changed, 50 insertions(+), 83 deletions(-) diff --git a/editor.planx.uk/src/routes/flow.tsx b/editor.planx.uk/src/routes/flow.tsx index 3ea3d56982..61df1d4207 100644 --- a/editor.planx.uk/src/routes/flow.tsx +++ b/editor.planx.uk/src/routes/flow.tsx @@ -1,7 +1,5 @@ import { gql } from "@apollo/client"; import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; -import ErrorFallback from "components/ErrorFallback"; -import TestEnvironmentBanner from "components/TestEnvironmentBanner"; import natsort from "natsort"; import { compose, @@ -9,7 +7,6 @@ import { map, Matcher, mount, - NotFoundError, redirect, route, withData, @@ -17,8 +14,6 @@ import { } from "navi"; import mapAccum from "ramda/src/mapAccum"; import React from "react"; -import { ErrorBoundary } from "react-error-boundary"; -import { View } from "react-navi"; import { client } from "../lib/graphql"; import FlowEditor from "../pages/FlowEditor"; @@ -26,8 +21,12 @@ import components from "../pages/FlowEditor/components/forms"; import FormModal from "../pages/FlowEditor/components/forms/FormModal"; import { SLUGS } from "../pages/FlowEditor/data/types"; import { useStore } from "../pages/FlowEditor/lib/store"; -import type { Flow, FlowSettings } from "../types"; +import type { Flow } from "../types"; import { makeTitle } from "./utils"; +import { flowEditorView } from "./views/flowEditor"; +import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder"; +import { View } from "react-navi"; +import Box from "@mui/material/Box"; const sorter = natsort({ insensitive: true }); const sortFlows = (a: { text: string }, b: { text: string }) => @@ -174,98 +173,66 @@ const nodeRoutes = mount({ "/:parent/nodes/:id/edit": editNode, }); -interface FlowMetadata { - flowSettings: FlowSettings; - flowAnalyticsLink: string; - isFlowPublished: boolean; -} - -interface GetFlowMetadata { - flows: { - flowSettings: FlowSettings; - flowAnalyticsLink: string; - publishedFlowsAggregate: { - aggregate: { - count: number; - }; - }; - }[]; -} - -const getFlowMetadata = async ( - flowSlug: string, - team: string, -): Promise => { - const { - data: { flows }, - } = await client.query({ - query: gql` - query GetFlow($slug: String!, $team_slug: String!) { - flows( - limit: 1 - where: { slug: { _eq: $slug }, team: { slug: { _eq: $team_slug } } } - ) { - id - flowSettings: settings - flowAnalyticsLink: analytics_link - publishedFlowsAggregate: published_flows_aggregate { - aggregate { - count - } - } - } - } - `, - variables: { - slug: flowSlug, - team_slug: team, - }, - }); - - const flow = flows[0]; - if (!flows) throw new NotFoundError(`Flow ${flowSlug} not found for ${team}`); - - const metadata = { - flowSettings: flow.flowSettings, - flowAnalyticsLink: flow.flowAnalyticsLink, - isFlowPublished: flow.publishedFlowsAggregate?.aggregate.count > 0, - }; - return metadata; -}; +const RoutePlaceholder = () => ( + + + +) const routes = compose( withData((req) => ({ flow: req.params.flow.split(",")[0], })), - withView(async (req) => { - const [flow, ...breadcrumbs] = req.params.flow.split(","); - const { flowSettings, flowAnalyticsLink, isFlowPublished } = - await getFlowMetadata(flow, req.params.team); - useStore.setState({ flowSettings, flowAnalyticsLink, isFlowPublished }); - - return ( - <> - - - - - - - ); - }), + withView(flowEditorView), mount({ "/": route(async (req) => { return { title: makeTitle([req.params.team, req.params.flow].join("/")), - view: , - }; + view: () => { + const [flow, ...breadcrumbs] = req.params.flow.split(","); + return ( + + ) + } + } }), - "/nodes": nodeRoutes, + "/nodes": compose( + withView((req) => { + const [flow, ...breadcrumbs] = req.params.flow.split(","); + return ( + <> + + + + ); + }), + nodeRoutes, + ), "/settings": lazy(() => import("./flowSettings")), + + "/service": route(async (req) => ({ + title: makeTitle([req.params.team, req.params.flow, "service"].join("/")), + view: RoutePlaceholder, + })), + + "/service-flags": route(async (req) => ({ + title: makeTitle([req.params.team, req.params.flow, "service-flags"].join("/")), + view: RoutePlaceholder, + })), + + "/data": route(async (req) => ({ + title: makeTitle([req.params.team, req.params.flow, "data"].join("/")), + view: RoutePlaceholder, + })), + + "/submissions-log": route(async (req) => ({ + title: makeTitle([req.params.team, req.params.flow, "submissions-log"].join("/")), + view: RoutePlaceholder, + })), }), ); From 9f66536404cc31bceca2b6d62030e648e2301ce0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Fri, 26 Apr 2024 13:54:46 +0100 Subject: [PATCH 07/16] chore: Add feature flag --- editor.planx.uk/src/lib/featureFlags.ts | 2 +- editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx | 2 +- editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx | 3 ++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/editor.planx.uk/src/lib/featureFlags.ts b/editor.planx.uk/src/lib/featureFlags.ts index 0993f38f67..85fc186aa8 100644 --- a/editor.planx.uk/src/lib/featureFlags.ts +++ b/editor.planx.uk/src/lib/featureFlags.ts @@ -1,5 +1,5 @@ // add/edit/remove feature flags in array below -const AVAILABLE_FEATURE_FLAGS = ["UNDO"] as const; +const AVAILABLE_FEATURE_FLAGS = ["UNDO", "EDITOR_NAVIGATION"] as const; type FeatureFlag = (typeof AVAILABLE_FEATURE_FLAGS)[number]; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx index a10e477771..81d760548a 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx @@ -107,7 +107,7 @@ function EditorMenu() { {routes.map(({ title, icon, route }) => ( - navigate(rootPath + route)}> + navigate(rootPath + route)} key={title}> {icon} diff --git a/editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx b/editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx index eb74507ff7..58e2793a16 100644 --- a/editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx +++ b/editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx @@ -4,6 +4,7 @@ import Box from "@mui/material/Box"; import { styled } from "@mui/material/styles"; import { ErrorBoundary } from "react-error-boundary"; import ErrorFallback from "components/ErrorFallback"; +import { hasFeatureFlag } from "lib/featureFlags"; const Root = styled(Box)(() => ({ display: "flex", @@ -14,7 +15,7 @@ const Root = styled(Box)(() => ({ const FlowEditorLayout: React.FC = ({ children }) => ( - + { hasFeatureFlag("EDITOR_NAVIGATION") && } {children} From bf2a305ab64dd2d6be7a224fec32fef303a0650c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Fri, 26 Apr 2024 13:57:17 +0100 Subject: [PATCH 08/16] chore: Better structure for icons --- .../src/pages/FlowEditor/components/EditorMenu.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx index 81d760548a..0f257bb4d3 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx @@ -78,27 +78,27 @@ function EditorMenu() { const routes = [ { title: "Editor", - icon: , + Icon: FormatListBulletedIcon, route: "/", }, { title: "Service", - icon:
, + Icon: Article, route: "/service", }, { title: "Service Flags", - icon: , + Icon: FlagIcon, route: "/service-flags", }, { title: "Data", - icon: , + Icon: DataObject, route: "/data", }, { title: "Submissions log", - icon: , + Icon: RuleFolderIcon, route: "/submissions-log", }, ]; @@ -106,11 +106,11 @@ function EditorMenu() { return ( - {routes.map(({ title, icon, route }) => ( + {routes.map(({ title, Icon, route }) => ( navigate(rootPath + route)} key={title}> - {icon} + From 114797903d836673509f1f226761857bb9efd3bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Fri, 26 Apr 2024 14:04:55 +0100 Subject: [PATCH 09/16] feat: Link back to correct settings components --- editor.planx.uk/src/routes/flow.tsx | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/editor.planx.uk/src/routes/flow.tsx b/editor.planx.uk/src/routes/flow.tsx index 61df1d4207..d8e13c8b13 100644 --- a/editor.planx.uk/src/routes/flow.tsx +++ b/editor.planx.uk/src/routes/flow.tsx @@ -24,9 +24,11 @@ import { useStore } from "../pages/FlowEditor/lib/store"; import type { Flow } from "../types"; import { makeTitle } from "./utils"; import { flowEditorView } from "./views/flowEditor"; -import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder"; import { View } from "react-navi"; -import Box from "@mui/material/Box"; +import ServiceSettings from "pages/FlowEditor/components/Settings/ServiceSettings"; +import Submissions from "pages/FlowEditor/components/Settings/Submissions"; +import DataManagerSettings from "pages/FlowEditor/components/Settings/DataManagerSettings"; +import ServiceFlags from "pages/FlowEditor/components/Settings/ServiceFlags"; const sorter = natsort({ insensitive: true }); const sortFlows = (a: { text: string }, b: { text: string }) => @@ -173,12 +175,6 @@ const nodeRoutes = mount({ "/:parent/nodes/:id/edit": editNode, }); -const RoutePlaceholder = () => ( - - - -) - const routes = compose( withData((req) => ({ flow: req.params.flow.split(",")[0], @@ -216,22 +212,22 @@ const routes = compose( "/service": route(async (req) => ({ title: makeTitle([req.params.team, req.params.flow, "service"].join("/")), - view: RoutePlaceholder, + view: ServiceSettings, })), "/service-flags": route(async (req) => ({ title: makeTitle([req.params.team, req.params.flow, "service-flags"].join("/")), - view: RoutePlaceholder, + view: ServiceFlags, })), "/data": route(async (req) => ({ title: makeTitle([req.params.team, req.params.flow, "data"].join("/")), - view: RoutePlaceholder, + view: DataManagerSettings, })), "/submissions-log": route(async (req) => ({ title: makeTitle([req.params.team, req.params.flow, "submissions-log"].join("/")), - view: RoutePlaceholder, + view: Submissions, })), }), ); From 9cd5d479377cb8b733eb192f112cd89bac95d09f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Fri, 26 Apr 2024 14:18:40 +0100 Subject: [PATCH 10/16] feat: Set up settings container view for standard layout --- editor.planx.uk/src/routes/flow.tsx | 68 +++++++++++++++++++---------- 1 file changed, 46 insertions(+), 22 deletions(-) diff --git a/editor.planx.uk/src/routes/flow.tsx b/editor.planx.uk/src/routes/flow.tsx index d8e13c8b13..14f11e02eb 100644 --- a/editor.planx.uk/src/routes/flow.tsx +++ b/editor.planx.uk/src/routes/flow.tsx @@ -13,7 +13,7 @@ import { withView, } from "navi"; import mapAccum from "ramda/src/mapAccum"; -import React from "react"; +import React, { PropsWithChildren } from "react"; import { client } from "../lib/graphql"; import FlowEditor from "../pages/FlowEditor"; @@ -29,6 +29,7 @@ import ServiceSettings from "pages/FlowEditor/components/Settings/ServiceSetting import Submissions from "pages/FlowEditor/components/Settings/Submissions"; import DataManagerSettings from "pages/FlowEditor/components/Settings/DataManagerSettings"; import ServiceFlags from "pages/FlowEditor/components/Settings/ServiceFlags"; +import Box from "@mui/material/Box"; const sorter = natsort({ insensitive: true }); const sortFlows = (a: { text: string }, b: { text: string }) => @@ -175,6 +176,12 @@ const nodeRoutes = mount({ "/:parent/nodes/:id/edit": editNode, }); +const SettingsContainer = () => ( + + + +) + const routes = compose( withData((req) => ({ flow: req.params.flow.split(",")[0], @@ -197,11 +204,11 @@ const routes = compose( "/nodes": compose( withView((req) => { - const [flow, ...breadcrumbs] = req.params.flow.split(","); + const [flow, ...breadcrumbs] = req.params.flow.split(","); return ( <> - + ); }), @@ -210,25 +217,42 @@ const routes = compose( "/settings": lazy(() => import("./flowSettings")), - "/service": route(async (req) => ({ - title: makeTitle([req.params.team, req.params.flow, "service"].join("/")), - view: ServiceSettings, - })), - - "/service-flags": route(async (req) => ({ - title: makeTitle([req.params.team, req.params.flow, "service-flags"].join("/")), - view: ServiceFlags, - })), - - "/data": route(async (req) => ({ - title: makeTitle([req.params.team, req.params.flow, "data"].join("/")), - view: DataManagerSettings, - })), - - "/submissions-log": route(async (req) => ({ - title: makeTitle([req.params.team, req.params.flow, "submissions-log"].join("/")), - view: Submissions, - })), + "/service": compose( + withView(SettingsContainer), + + route(async (req) => ({ + title: makeTitle([req.params.team, req.params.flow, "service"].join("/")), + view: ServiceSettings + })), + ), + + "/service-flags": compose( + withView(SettingsContainer), + + route(async (req) => ({ + title: makeTitle([req.params.team, req.params.flow, "service-flags"].join("/")), + view: ServiceFlags + })), + + ), + + "/data": compose( + withView(SettingsContainer), + + route(async (req) => ({ + title: makeTitle([req.params.team, req.params.flow, "data"].join("/")), + view: DataManagerSettings + })), + ), + + "/submissions-log": compose( + withView(SettingsContainer), + + route(async (req) => ({ + title: makeTitle([req.params.team, req.params.flow, "submissions-log"].join("/")), + view: Submissions + })), + ) }), ); From 5d310b1090a2b70c1a34e3d93393f63836cc7ae1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Fri, 26 Apr 2024 14:41:03 +0100 Subject: [PATCH 11/16] fix: Stop test banner from re-appearing --- .../src/components/TestEnvironmentBanner.tsx | 53 +++++++++---------- .../src/pages/FlowEditor/lib/store/editor.ts | 6 +++ 2 files changed, 31 insertions(+), 28 deletions(-) diff --git a/editor.planx.uk/src/components/TestEnvironmentBanner.tsx b/editor.planx.uk/src/components/TestEnvironmentBanner.tsx index a35043eb51..ef2de024ab 100644 --- a/editor.planx.uk/src/components/TestEnvironmentBanner.tsx +++ b/editor.planx.uk/src/components/TestEnvironmentBanner.tsx @@ -5,6 +5,7 @@ import Container from "@mui/material/Container"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import { visuallyHidden } from "@mui/utils"; +import { useStore } from "pages/FlowEditor/lib/store"; import React, { useState } from "react"; const TestEnvironmentWarning = styled(Box)(({ theme }) => ({ @@ -16,37 +17,33 @@ const TestEnvironmentWarning = styled(Box)(({ theme }) => ({ })); const TestEnvironmentBanner: React.FC = () => { - const [showWarning, setShowWarning] = useState(true); + const [isTestEnvBannerVisible, hideTestEnvBanner] = useStore(state => [state.isTestEnvBannerVisible, state.hideTestEnvBanner]); - const isTestEnvironment = () => !window.location.href.includes(".uk"); + if (!isTestEnvBannerVisible) return null; return ( - <> - {isTestEnvironment() && showWarning && ( - - - - - - This is a testing environment for new features. - Do not use it to make permanent content changes. - - - - - - )} - + + + + + + This is a testing environment for new features. + Do not use it to make permanent content changes. + + + + + ); }; diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts index f850c66d25..98bdb902b9 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts @@ -37,6 +37,8 @@ export interface EditorUIStore { flowLayout: FlowLayout; showPreview: boolean; togglePreview: () => void; + isTestEnvBannerVisible: boolean; + hideTestEnvBanner: () => void; } export const editorUIStore: StateCreator< @@ -52,6 +54,10 @@ export const editorUIStore: StateCreator< togglePreview: () => { set({ showPreview: !get().showPreview }); }, + + isTestEnvBannerVisible: true, + + hideTestEnvBanner: () => set({ isTestEnvBannerVisible: false }), }); interface PublishFlowResponse { From fd63efe64af1d428a67657763b66c9932bb8c0ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Fri, 26 Apr 2024 15:22:25 +0100 Subject: [PATCH 12/16] chore: Tidy ups --- editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx | 3 ++- editor.planx.uk/src/routes/flow.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx index 0f257bb4d3..9bafeb73d1 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx @@ -74,6 +74,7 @@ function EditorMenu() { const rootPath = rootFlowPath(); const isActive = (route: string) => lastChunk.url.pathname.endsWith(route); + const handleClick = (route: string) => !isActive(route) && navigate(rootPath + route); const routes = [ { @@ -107,7 +108,7 @@ function EditorMenu() { {routes.map(({ title, Icon, route }) => ( - navigate(rootPath + route)} key={title}> + handleClick(route)} key={title}> diff --git a/editor.planx.uk/src/routes/flow.tsx b/editor.planx.uk/src/routes/flow.tsx index 14f11e02eb..5e9753a2e6 100644 --- a/editor.planx.uk/src/routes/flow.tsx +++ b/editor.planx.uk/src/routes/flow.tsx @@ -13,7 +13,7 @@ import { withView, } from "navi"; import mapAccum from "ramda/src/mapAccum"; -import React, { PropsWithChildren } from "react"; +import React from "react"; import { client } from "../lib/graphql"; import FlowEditor from "../pages/FlowEditor"; From 71b56c72b8df690b06c18e08b5aa6b1dc5704001 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Fri, 26 Apr 2024 16:21:50 +0100 Subject: [PATCH 13/16] feat: Increase padding of setting pages --- editor.planx.uk/src/routes/flow.tsx | 45 ++++++++++++++++------------- 1 file changed, 25 insertions(+), 20 deletions(-) diff --git a/editor.planx.uk/src/routes/flow.tsx b/editor.planx.uk/src/routes/flow.tsx index 5e9753a2e6..b85c79776b 100644 --- a/editor.planx.uk/src/routes/flow.tsx +++ b/editor.planx.uk/src/routes/flow.tsx @@ -1,4 +1,5 @@ import { gql } from "@apollo/client"; +import Box from "@mui/material/Box"; import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; import natsort from "natsort"; import { @@ -12,8 +13,13 @@ import { withData, withView, } from "navi"; +import DataManagerSettings from "pages/FlowEditor/components/Settings/DataManagerSettings"; +import ServiceFlags from "pages/FlowEditor/components/Settings/ServiceFlags"; +import ServiceSettings from "pages/FlowEditor/components/Settings/ServiceSettings"; +import Submissions from "pages/FlowEditor/components/Settings/Submissions"; import mapAccum from "ramda/src/mapAccum"; import React from "react"; +import { View } from "react-navi"; import { client } from "../lib/graphql"; import FlowEditor from "../pages/FlowEditor"; @@ -24,12 +30,6 @@ import { useStore } from "../pages/FlowEditor/lib/store"; import type { Flow } from "../types"; import { makeTitle } from "./utils"; import { flowEditorView } from "./views/flowEditor"; -import { View } from "react-navi"; -import ServiceSettings from "pages/FlowEditor/components/Settings/ServiceSettings"; -import Submissions from "pages/FlowEditor/components/Settings/Submissions"; -import DataManagerSettings from "pages/FlowEditor/components/Settings/DataManagerSettings"; -import ServiceFlags from "pages/FlowEditor/components/Settings/ServiceFlags"; -import Box from "@mui/material/Box"; const sorter = natsort({ insensitive: true }); const sortFlows = (a: { text: string }, b: { text: string }) => @@ -177,10 +177,10 @@ const nodeRoutes = mount({ }); const SettingsContainer = () => ( - + -) +); const routes = compose( withData((req) => ({ @@ -197,9 +197,9 @@ const routes = compose( const [flow, ...breadcrumbs] = req.params.flow.split(","); return ( - ) - } - } + ); + }, + }; }), "/nodes": compose( @@ -221,8 +221,10 @@ const routes = compose( withView(SettingsContainer), route(async (req) => ({ - title: makeTitle([req.params.team, req.params.flow, "service"].join("/")), - view: ServiceSettings + title: makeTitle( + [req.params.team, req.params.flow, "service"].join("/"), + ), + view: ServiceSettings, })), ), @@ -230,10 +232,11 @@ const routes = compose( withView(SettingsContainer), route(async (req) => ({ - title: makeTitle([req.params.team, req.params.flow, "service-flags"].join("/")), - view: ServiceFlags + title: makeTitle( + [req.params.team, req.params.flow, "service-flags"].join("/"), + ), + view: ServiceFlags, })), - ), "/data": compose( @@ -241,7 +244,7 @@ const routes = compose( route(async (req) => ({ title: makeTitle([req.params.team, req.params.flow, "data"].join("/")), - view: DataManagerSettings + view: DataManagerSettings, })), ), @@ -249,10 +252,12 @@ const routes = compose( withView(SettingsContainer), route(async (req) => ({ - title: makeTitle([req.params.team, req.params.flow, "submissions-log"].join("/")), - view: Submissions + title: makeTitle( + [req.params.team, req.params.flow, "submissions-log"].join("/"), + ), + view: Submissions, })), - ) + ), }), ); From 29b329f64a25683ad61683181ffef86e7cd68165 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Tue, 30 Apr 2024 12:19:22 +0100 Subject: [PATCH 14/16] feat: Update icons and options --- .../FlowEditor/components/EditorMenu.tsx | 51 ++++++++----------- editor.planx.uk/src/routes/flow.tsx | 2 +- 2 files changed, 21 insertions(+), 32 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx index 9bafeb73d1..60c3d9fc61 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx @@ -1,16 +1,14 @@ -import FlagIcon from '@mui/icons-material/Flag'; -import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'; -import DataObject from '@mui/icons-material/DataObject'; -import Article from '@mui/icons-material/Article'; -import RuleFolderIcon from '@mui/icons-material/RuleFolder'; +import AccountTreeIcon from "@mui/icons-material/AccountTree"; +import FactCheckIcon from "@mui/icons-material/FactCheck"; +import TuneIcon from "@mui/icons-material/Tune"; import Box from "@mui/material/Box"; -import IconButton from '@mui/material/IconButton'; +import IconButton from "@mui/material/IconButton"; import { styled } from "@mui/material/styles"; -import Tooltip, { tooltipClasses,TooltipProps } from '@mui/material/Tooltip'; +import Tooltip, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip"; import React from "react"; -import { useCurrentRoute, useNavigation } from 'react-navi'; -import { rootFlowPath } from 'routes/utils'; -import { FONT_WEIGHT_SEMI_BOLD } from 'theme'; +import { useCurrentRoute, useNavigation } from "react-navi"; +import { rootFlowPath } from "routes/utils"; +import { FONT_WEIGHT_SEMI_BOLD } from "theme"; const MENU_WIDTH = "46px"; @@ -18,13 +16,13 @@ const Root = styled(Box)(({ theme }) => ({ width: MENU_WIDTH, flexShrink: 0, background: theme.palette.background.paper, - borderRight:`1px solid ${theme.palette.border.main}`, + borderRight: `1px solid ${theme.palette.border.main}`, })); const MenuWrap = styled("ul")(({ theme }) => ({ listStyle: "none", margin: 0, - padding: theme.spacing(5, 0, 0, 0), + padding: theme.spacing(4, 0, 0, 0), })); const MenuItem = styled("li")(({ theme }) => ({ @@ -74,32 +72,23 @@ function EditorMenu() { const rootPath = rootFlowPath(); const isActive = (route: string) => lastChunk.url.pathname.endsWith(route); - const handleClick = (route: string) => !isActive(route) && navigate(rootPath + route); + const handleClick = (route: string) => + !isActive(route) && navigate(rootPath + route); const routes = [ - { + { title: "Editor", - Icon: FormatListBulletedIcon, + Icon: AccountTreeIcon, route: "/", }, - { - title: "Service", - Icon: Article, + { + title: "Service settings", + Icon: TuneIcon, route: "/service", }, - { - title: "Service Flags", - Icon: FlagIcon, - route: "/service-flags", - }, - { - title: "Data", - Icon: DataObject, - route: "/data", - }, - { + { title: "Submissions log", - Icon: RuleFolderIcon, + Icon: FactCheckIcon, route: "/submissions-log", }, ]; @@ -111,7 +100,7 @@ function EditorMenu() { handleClick(route)} key={title}> - + diff --git a/editor.planx.uk/src/routes/flow.tsx b/editor.planx.uk/src/routes/flow.tsx index b85c79776b..22a797e35c 100644 --- a/editor.planx.uk/src/routes/flow.tsx +++ b/editor.planx.uk/src/routes/flow.tsx @@ -177,7 +177,7 @@ const nodeRoutes = mount({ }); const SettingsContainer = () => ( - + ); From 5d76658dd7a88409a3724d9a7c8685d43f766cd7 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Tue, 30 Apr 2024 12:56:34 +0100 Subject: [PATCH 15/16] feat: Custom editor icon --- .../FlowEditor/components/EditorMenu.tsx | 4 ++-- editor.planx.uk/src/ui/images/CustomIcons.tsx | 20 +++++++++++++++++++ 2 files changed, 22 insertions(+), 2 deletions(-) create mode 100644 editor.planx.uk/src/ui/images/CustomIcons.tsx diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx index 60c3d9fc61..53282f0b0f 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx @@ -1,4 +1,3 @@ -import AccountTreeIcon from "@mui/icons-material/AccountTree"; import FactCheckIcon from "@mui/icons-material/FactCheck"; import TuneIcon from "@mui/icons-material/Tune"; import Box from "@mui/material/Box"; @@ -9,6 +8,7 @@ import React from "react"; import { useCurrentRoute, useNavigation } from "react-navi"; import { rootFlowPath } from "routes/utils"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; +import EditorCustomIcon from "ui/images/CustomIcons"; const MENU_WIDTH = "46px"; @@ -78,7 +78,7 @@ function EditorMenu() { const routes = [ { title: "Editor", - Icon: AccountTreeIcon, + Icon: EditorCustomIcon, route: "/", }, { diff --git a/editor.planx.uk/src/ui/images/CustomIcons.tsx b/editor.planx.uk/src/ui/images/CustomIcons.tsx new file mode 100644 index 0000000000..bfd6b364bb --- /dev/null +++ b/editor.planx.uk/src/ui/images/CustomIcons.tsx @@ -0,0 +1,20 @@ +import SvgIcon from "@mui/material/SvgIcon"; +import * as React from "react"; + +export default function EditorCustomIcon() { + return ( + + + + + + ); +} From 023554e8d0c769247ba012f8a7e6e20030f06122 Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Tue, 30 Apr 2024 14:17:08 +0100 Subject: [PATCH 16/16] fix: Icon in correct folder --- .../src/pages/FlowEditor/components/EditorMenu.tsx | 4 ++-- .../src/ui/{images/CustomIcons.tsx => icons/Editor.tsx} | 9 ++------- 2 files changed, 4 insertions(+), 9 deletions(-) rename editor.planx.uk/src/ui/{images/CustomIcons.tsx => icons/Editor.tsx} (77%) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx index 53282f0b0f..09c3dbb45f 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx @@ -8,7 +8,7 @@ import React from "react"; import { useCurrentRoute, useNavigation } from "react-navi"; import { rootFlowPath } from "routes/utils"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; -import EditorCustomIcon from "ui/images/CustomIcons"; +import EditorIcon from "ui/icons/Editor"; const MENU_WIDTH = "46px"; @@ -78,7 +78,7 @@ function EditorMenu() { const routes = [ { title: "Editor", - Icon: EditorCustomIcon, + Icon: EditorIcon, route: "/", }, { diff --git a/editor.planx.uk/src/ui/images/CustomIcons.tsx b/editor.planx.uk/src/ui/icons/Editor.tsx similarity index 77% rename from editor.planx.uk/src/ui/images/CustomIcons.tsx rename to editor.planx.uk/src/ui/icons/Editor.tsx index bfd6b364bb..8239a23efd 100644 --- a/editor.planx.uk/src/ui/images/CustomIcons.tsx +++ b/editor.planx.uk/src/ui/icons/Editor.tsx @@ -1,15 +1,10 @@ import SvgIcon from "@mui/material/SvgIcon"; import * as React from "react"; -export default function EditorCustomIcon() { +export default function EditorIcon() { return ( - +