feat: Pesist FlowEditor state on route changes

editor.planx.uk/src/index.tsx

@@ -12,13 +12,12 @@ import ErrorPage from "pages/ErrorPage";
 import { AnalyticsProvider } from "pages/FlowEditor/lib/analytics/provider";
 import React, { Suspense, useEffect } from "react";
 import { createRoot } from "react-dom/client";
-import { NotFoundBoundary, Router, useLoadingRoute, View } from "react-navi";
+import { NotFoundBoundary, Router, View } from "react-navi";
 import HelmetProvider from "react-navi-helmet-async";
 import { ToastContainer } from "react-toastify";
 
 // init airbrake before everything else
 import * as airbrake from "./airbrake";
-import DelayedLoadingIndicator from "./components/DelayedLoadingIndicator";
 import { client } from "./lib/graphql";
 import navigation from "./lib/navigation";
 import { defaultTheme } from "./theme";
@@ -55,8 +54,6 @@ const hasJWT = (): boolean | void => {
 const Layout: React.FC<{
   children: React.ReactNode;
 }> = ({ children }) => {
-  const isLoading = useLoadingRoute();
-
   useEffect(() => {
     const observer = new MutationObserver(() => {
       // set the page title based on whatever heading is currently shown
@@ -82,11 +79,7 @@ const Layout: React.FC<{
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={defaultTheme}>
         <NotFoundBoundary render={() => <ErrorPage title="Not found" />}>
-          {isLoading ? (
-            <DelayedLoadingIndicator msDelayBeforeVisible={500} />
-          ) : (
-            children
-          )}
+          {children}
         </NotFoundBoundary>
       </ThemeProvider>
     </StyledEngineProvider>

editor.planx.uk/src/pages/Login.tsx

@@ -5,7 +5,9 @@ import Button from "@mui/material/Button";
 import Container from "@mui/material/Container";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
+import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
 import React from "react";
+import { useLoadingRoute } from "react-navi";
 
 const Wrapper = styled(Box)(({ theme }) => ({
   width: "100vw",
@@ -46,6 +48,9 @@ const LoginButton = styled(Button)(({ theme }) => ({
 }));
 
 const Login: React.FC = () => {
+  const isLoading = useLoadingRoute();
+  if (isLoading) return <DelayedLoadingIndicator />;
+
   return (
     <Wrapper>
       <LoginContainer>

editor.planx.uk/src/pages/layout/FlowEditorLayout.tsx

@@ -1,9 +1,13 @@
 import ErrorFallback from "components/ErrorFallback";
+import FlowEditor from "pages/FlowEditor";
 import React, { PropsWithChildren } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 const FlowEditorLayout: React.FC<PropsWithChildren> = ({ children }) => (
-  <ErrorBoundary FallbackComponent={ErrorFallback}>{children}</ErrorBoundary>
+  <ErrorBoundary FallbackComponent={ErrorFallback}>
+    <FlowEditor />
+    {children}
+  </ErrorBoundary>
 );
 
 export default FlowEditorLayout;

editor.planx.uk/src/routes/flow.tsx

@@ -1,36 +1,25 @@
 import { gql } from "@apollo/client";
-import {
-  ComponentType as TYPES,
-  FlowStatus,
-} from "@opensystemslab/planx-core/types";
+import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import natsort from "natsort";
 import {
   compose,
-  lazy,
   map,
   Matcher,
   mount,
-  NaviRequest,
   redirect,
   route,
   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";
 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";
 
@@ -179,44 +168,6 @@ const nodeRoutes = mount({
   "/:parent/nodes/:id/edit": editNode,
 });
 
-const SettingsContainer = () => <View />;
-
-interface GetFlowSettings {
-  flows: {
-    id: string;
-    settings: FlowSettings;
-    status: FlowStatus;
-  }[];
-}
-
-export const getFlowSettings = async (req: NaviRequest) => {
-  const {
-    data: {
-      flows: [{ settings, status }],
-    },
-  } = await client.query<GetFlowSettings>({
-    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],
@@ -228,73 +179,12 @@ const routes = compose(
     "/": route(async (req) => {
       return {
         title: makeTitle([req.params.team, req.params.flow].join("/")),
-        view: () => {
-          const [flow, ...breadcrumbs] = req.params.flow.split(",");
-          return (
-            <FlowEditor key={flow} flow={flow} breadcrumbs={breadcrumbs} />
-          );
-        },
+        // Default view of FlowEditor (single instance held in layout)
+        view: () => null,
       };
     }),
 
-    "/feedback": lazy(() => import("./feedback")),
-
-    "/nodes": compose(
-      withView((req) => {
-        const [flow, ...breadcrumbs] = req.params.flow.split(",");
-        return (
-          <>
-            <FlowEditor key={flow} flow={flow} breadcrumbs={breadcrumbs} />
-            <View />
-          </>
-        );
-      }),
-      nodeRoutes,
-    ),
-
-    "/service": compose(
-      withView(SettingsContainer),
-
-      route(async (req) => ({
-        getData: await getFlowSettings(req),
-        title: makeTitle(
-          [req.params.team, req.params.flow, "service"].join("/"),
-        ),
-        view: ServiceSettings,
-      })),
-    ),
-
-    "/service-flags": compose(
-      withView(SettingsContainer),
-
-      route(async (req) => ({
-        getData: await getFlowSettings(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,
-      })),
-    ),
+    "/nodes": nodeRoutes,
   }),
 );
 

editor.planx.uk/src/routes/serviceSettings.tsx

@@ -0,0 +1,65 @@
+import { gql } from "@apollo/client";
+import { FlowStatus } from "@opensystemslab/planx-core/types";
+import { compose, mount, NaviRequest, route, withData } from "navi";
+import ServiceSettings from "pages/FlowEditor/components/Settings/ServiceSettings";
+
+import { client } from "../lib/graphql";
+import { useStore } from "../pages/FlowEditor/lib/store";
+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<GetFlowSettings>({
+    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 serviceSettingsRoutes = compose(
+  withData((req) => ({
+    mountpath: req.mountpath,
+  })),
+
+  mount({
+    "/": compose(
+      route(async (req) => ({
+        getData: await getFlowSettings(req),
+        title: makeTitle(
+          [req.params.team, req.params.flow, "service"].join("/"),
+        ),
+        view: ServiceSettings,
+      })),
+    ),
+  }),
+);
+
+export default serviceSettingsRoutes;

editor.planx.uk/src/routes/submissionsLog.tsx

@@ -0,0 +1,23 @@
+import { compose, mount, route, withData } from "navi";
+import Submissions from "pages/FlowEditor/components/Settings/Submissions";
+
+import { makeTitle } from "./utils";
+
+const submissionsLogRoutes = compose(
+  withData((req) => ({
+    mountpath: req.mountpath,
+  })),
+
+  mount({
+    "/": compose(
+      route(async (req) => ({
+        title: makeTitle(
+          [req.params.team, req.params.flow, "submissions-log"].join("/"),
+        ),
+        view: Submissions,
+      })),
+    ),
+  }),
+);
+
+export default submissionsLogRoutes;