diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx index 9a355dbf25..bb3e269f8d 100644 --- a/editor.planx.uk/src/components/Header.tsx +++ b/editor.planx.uk/src/components/Header.tsx @@ -544,7 +544,7 @@ const EditorToolbar: React.FC<{ {isTeamSettingsVisible && ( <> navigate(`${rootTeamPath()}/settings`)} + onClick={() => navigate(`${rootTeamPath()}/general-settings`)} > Team Settings @@ -559,7 +559,7 @@ const EditorToolbar: React.FC<{ <> - navigate([rootFlowPath(true), "settings"].join("/")) + navigate([rootFlowPath(true), "service"].join("/")) } > Flow Settings diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx deleted file mode 100644 index 86a9966b2a..0000000000 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx +++ /dev/null @@ -1,163 +0,0 @@ -import Close from "@mui/icons-material/Close"; -import AppBar from "@mui/material/AppBar"; -import Box from "@mui/material/Box"; -import Grid from "@mui/material/Grid"; -import IconButton from "@mui/material/IconButton"; -import { styled } from "@mui/material/styles"; -import Tab from "@mui/material/Tab"; -import Tabs from "@mui/material/Tabs"; -import { HEADER_HEIGHT } from "components/Header"; -import React from "react"; -import { Link, useNavigation } from "react-navi"; -export interface SettingsTab { - route: string; - name: string; - Component: React.FC; -} - -interface SettingsProps { - currentTab: string; - tabs: SettingsTab[]; -} - -interface TabPanelProps { - children?: React.ReactNode; - index: number; - value: number; -} - -function TabPanel(props: TabPanelProps) { - const { children, value, index, ...other } = props; - - return ( - - ); -} - -function a11yProps(index: number) { - return { - id: `nav-tab-${index}`, - "aria-controls": `nav-tabpanel-${index}`, - }; -} - -interface LinkTabProps { - label?: string; - href?: string; -} - -const StyledTab = styled(Tab)(({ theme }) => ({ - position: "relative", - zIndex: 1, - textTransform: "none", - background: theme.palette.background.default, -})) as typeof Tab; - -function LinkTab(props: LinkTabProps) { - return ( - { - if (!event.metaKey) { - event.preventDefault(); - } - }} - {...props} - /> - ); -} - -const PREFIX = "Settings"; - -const classes = { - tabs: `${PREFIX}-tabs`, - tabIndicator: `${PREFIX}-tabIndicator`, -}; - -const Root = styled(Box)(({ theme }) => ({ - flexGrow: 1, - backgroundColor: theme.palette.background.default, - position: "absolute", - top: HEADER_HEIGHT, - left: 0, - right: 0, - minHeight: `calc(100% - ${HEADER_HEIGHT}px)`, - // Ensure settings panels sit above editor content with explicit z-index set, will be redundent when we move to side-tabbed settings - zIndex: theme.zIndex.appBar, - [`& .${classes.tabs}`]: { - backgroundColor: theme.palette.border.main, - }, - [`& .${classes.tabIndicator}`]: { - height: "100%", - backgroundColor: "#f2f2f2", - zIndex: 0, - }, -})); - -const Settings: React.FC = ({ currentTab, tabs }) => { - const { navigate } = useNavigation(); - - const handleChange = (event: React.ChangeEvent) => { - navigate(event.currentTarget.pathname); - }; - - const value = tabs.findIndex(({ route }) => route === currentTab); - - return ( - - - - - - {tabs.map(({ name, route }, index) => ( - - ))} - - - - - - - - - - {tabs.map(({ name, Component }, index) => ( - - - - ))} - - ); -}; - -export default Settings; diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx index 5f98b067f9..c712f3c1e2 100644 --- a/editor.planx.uk/src/pages/FlowEditor/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/index.tsx @@ -1,4 +1,3 @@ -import "./components/Settings"; import "./floweditor.scss"; import Box from "@mui/material/Box"; diff --git a/editor.planx.uk/src/routes/flow.tsx b/editor.planx.uk/src/routes/flow.tsx index d48bf7ea53..c2b7853252 100644 --- a/editor.planx.uk/src/routes/flow.tsx +++ b/editor.planx.uk/src/routes/flow.tsx @@ -1,5 +1,8 @@ import { gql } from "@apollo/client"; -import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; +import { + ComponentType as TYPES, + FlowStatus, +} from "@opensystemslab/planx-core/types"; import natsort from "natsort"; import { compose, @@ -7,6 +10,7 @@ import { map, Matcher, mount, + NaviRequest, redirect, route, withData, @@ -26,8 +30,7 @@ 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 } from "../types"; -import { getFlowSettings } from "./flowSettings"; +import type { Flow, FlowSettings } from "../types"; import { makeTitle } from "./utils"; import { flowEditorView } from "./views/flowEditor"; @@ -178,6 +181,42 @@ const nodeRoutes = mount({ const SettingsContainer = () => ; +interface GetFlowSettings { + flows: { + id: string; + settings: FlowSettings; + status: FlowStatus; + }[]; +} + +export const getFlowSettings = async (req: NaviRequest) => { + const { + data: { + flows: [{ settings, status }], + }, + } = 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 + settings + status + } + } + `, + variables: { + slug: req.params.flow, + team_slug: req.params.team, + }, + }); + + useStore.getState().setFlowSettings(settings); + useStore.getState().setFlowStatus(status); +}; + const routes = compose( withData((req) => ({ flow: req.params.flow.split(",")[0], @@ -213,8 +252,6 @@ const routes = compose( nodeRoutes, ), - "/settings": lazy(() => import("./flowSettings")), - "/service": compose( withView(SettingsContainer), diff --git a/editor.planx.uk/src/routes/flowSettings.tsx b/editor.planx.uk/src/routes/flowSettings.tsx deleted file mode 100644 index b06ce1406e..0000000000 --- a/editor.planx.uk/src/routes/flowSettings.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { FlowStatus } from "@opensystemslab/planx-core/types"; -import gql from "graphql-tag"; -import { - compose, - map, - mount, - NaviRequest, - NotFoundError, - redirect, - route, - withData, -} 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 { useStore } from "pages/FlowEditor/lib/store"; -import React from "react"; - -import { client } from "../lib/graphql"; -import Settings, { SettingsTab } from "../pages/FlowEditor/components/Settings"; -import type { FlowSettings } from "../types"; -import { makeTitle } from "./utils"; - -interface GetFlowSettings { - flows: { - id: string; - settings: FlowSettings; - status: FlowStatus; - }[]; -} - -export const getFlowSettings = async (req: NaviRequest) => { - const { - data: { - flows: [{ settings, status }], - }, - } = 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 - settings - status - } - } - `, - variables: { - slug: req.params.flow, - team_slug: req.params.team, - }, - }); - - useStore.getState().setFlowSettings(settings); - useStore.getState().setFlowStatus(status); -}; - -const tabs: SettingsTab[] = [ - { - name: "Service", - route: "service", - Component: ServiceSettings, - }, - { - name: "Service Flags", - route: "flags", - Component: ServiceFlags, - }, - { - name: "Data", - route: "data-manager", - Component: DataManagerSettings, - }, - { - name: "Submissions", - route: "submissions", - Component: Submissions, - }, -]; - -const flowSettingsRoutes = compose( - withData((req) => ({ - mountpath: req.mountpath, - })), - - mount({ - "/": redirect("./service"), - "/:tab": map(async (req) => { - const isAuthorised = useStore.getState().canUserEditTeam(req.params.team); - if (!isAuthorised) - throw new NotFoundError( - `User does not have access to ${req.originalUrl}`, - ); - - return route({ - getData: getFlowSettings, - title: makeTitle( - [req.params.team, req.params.flow, "Flow Settings"].join("/"), - ), - view: , - }); - }), - }), -); - -export default flowSettingsRoutes; diff --git a/editor.planx.uk/src/routes/team.tsx b/editor.planx.uk/src/routes/team.tsx index 2a482e6345..ad89c46704 100644 --- a/editor.planx.uk/src/routes/team.tsx +++ b/editor.planx.uk/src/routes/team.tsx @@ -28,8 +28,6 @@ const routes = compose( view: , })), - "/settings": lazy(() => import("./teamSettings")), - "/:flow": lazy(async (req) => { const [slug] = req.params.flow.split(","); diff --git a/editor.planx.uk/src/routes/teamSettings.tsx b/editor.planx.uk/src/routes/teamSettings.tsx deleted file mode 100644 index 8427b37501..0000000000 --- a/editor.planx.uk/src/routes/teamSettings.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { - compose, - map, - mount, - NotFoundError, - redirect, - route, - withData, -} from "navi"; -import DesignSettings from "pages/FlowEditor/components/Settings/DesignSettings"; -import GeneralSettings from "pages/FlowEditor/components/Settings/GeneralSettings"; -import TeamSettings from "pages/FlowEditor/components/Settings/TeamSettings"; -import { useStore } from "pages/FlowEditor/lib/store"; -import React from "react"; - -import Settings from "../pages/FlowEditor/components/Settings"; -import { makeTitle } from "./utils"; - -const teamSettingsRoutes = compose( - withData((req) => ({ - mountpath: req.mountpath, - })), - - mount({ - "/": redirect("./general"), - "/:tab": map(async (req) => { - const isAuthorised = useStore.getState().canUserEditTeam(req.params.team); - - if (!isAuthorised) - throw new NotFoundError( - `User does not have access to ${req.originalUrl}`, - ); - - return route(async (req) => ({ - title: makeTitle([req.params.team, "Team Settings"].join("/")), - view: ( - - ), - })); - }), - }), -); - -export default teamSettingsRoutes;