Revert "feat: Pesist FlowEditor state on route changes" (#3691)

editor.planx.uk/src/components/EditorNavMenu.tsx

@@ -13,8 +13,8 @@ import Tooltip, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { Role } from "@opensystemslab/planx-core/types";
 import { useStore } from "pages/FlowEditor/lib/store";
-import React, { useRef } from "react";
-import { useCurrentRoute, useLoadingRoute, useNavigation } from "react-navi";
+import React from "react";
+import { useCurrentRoute, useNavigation } from "react-navi";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import EditorIcon from "ui/icons/Editor";
 
@@ -26,11 +26,6 @@ interface Route {
   disabled?: boolean;
 }
 
-interface RoutesForURL {
-  routes: Route[];
-  compact: boolean;
-}
-
 const MENU_WIDTH_COMPACT = "51px";
 const MENU_WIDTH_FULL = "164px";
 
@@ -109,7 +104,6 @@ const MenuButton = styled(IconButton, {
 function EditorNavMenu() {
   const { navigate } = useNavigation();
   const { url } = useCurrentRoute();
-  const isRouteLoading = useLoadingRoute();
   const [teamSlug, flowSlug, user, canUserEditTeam, flowAnalyticsLink] =
     useStore((state) => [
       state.teamSlug,
@@ -231,29 +225,14 @@ function EditorNavMenu() {
     ...flowAnalyticsRoute,
   ];
 
-  const defaultRoutes: RoutesForURL = {
-    routes: globalLayoutRoutes,
-    compact: false,
-  };
-  const previousRoutes = useRef<RoutesForURL>(defaultRoutes);
-
-  const getRoutesForUrl = (url: string): RoutesForURL => {
-    // Return the previous value when route is loading to avoid flash of incorrect version
-    if (isRouteLoading) return previousRoutes.current;
-
-    let result: RoutesForURL;
-
-    if (flowSlug && url.includes(flowSlug)) {
-      result = { routes: flowLayoutRoutes, compact: true };
-    } else if (teamSlug && url.includes(teamSlug)) {
-      result = { routes: teamLayoutRoutes, compact: false };
-    } else {
-      result = defaultRoutes;
-    }
-
-    previousRoutes.current = result;
-
-    return result;
+  const getRoutesForUrl = (
+    url: string,
+  ): { routes: Route[]; compact: boolean } => {
+    if (flowSlug && url.includes(flowSlug))
+      return { routes: flowLayoutRoutes, compact: true };
+    if (teamSlug && url.includes(teamSlug))
+      return { routes: teamLayoutRoutes, compact: false };
+    return { routes: globalLayoutRoutes, compact: false };
   };
 
   const { routes, compact } = getRoutesForUrl(url.href);

editor.planx.uk/src/index.tsx

@@ -12,12 +12,13 @@ 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, View } from "react-navi";
+import { NotFoundBoundary, Router, useLoadingRoute, 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";
@@ -54,6 +55,8 @@ 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
@@ -79,7 +82,11 @@ const Layout: React.FC<{
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={defaultTheme}>
         <NotFoundBoundary render={() => <ErrorPage title="Not found" />}>
-          {children}
+          {isLoading ? (
+            <DelayedLoadingIndicator msDelayBeforeVisible={500} />
+          ) : (
+            children
+          )}
         </NotFoundBoundary>
       </ThemeProvider>
     </StyledEngineProvider>

editor.planx.uk/src/pages/FlowEditor/components/Settings/DataManagerSettings.tsx

@@ -0,0 +1,25 @@
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import React from "react";
+import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
+import SettingsSection from "ui/editor/SettingsSection";
+
+const DataManagerSettings: React.FC = () => {
+  return (
+    <Container maxWidth="formWrap">
+      <SettingsSection>
+        <Typography variant="h2" component="h3" gutterBottom>
+          Data Manager
+        </Typography>
+        <Typography variant="body1">
+          Manage the data that your service uses and makes available via its
+          API.
+        </Typography>
+      </SettingsSection>
+      <SettingsSection>
+        <FeaturePlaceholder title="Feature in development" />
+      </SettingsSection>
+    </Container>
+  );
+};
+export default DataManagerSettings;

editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceFlags.tsx

@@ -0,0 +1,25 @@
+import Container from "@mui/material/Container";
+import Typography from "@mui/material/Typography";
+import React from "react";
+import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
+import SettingsSection from "ui/editor/SettingsSection";
+
+const ServiceFlags: React.FC = () => {
+  return (
+    <Container maxWidth="formWrap">
+      <SettingsSection>
+        <Typography variant="h2" component="h3" gutterBottom>
+          Service flags
+        </Typography>
+        <Typography variant="body1">
+          Manage the flag sets that this service uses. Flags at the top of a set
+          override flags below.
+        </Typography>
+      </SettingsSection>
+      <SettingsSection>
+        <FeaturePlaceholder title="Feature in development" />
+      </SettingsSection>
+    </Container>
+  );
+};
+export default ServiceFlags;

editor.planx.uk/src/pages/FlowEditor/index.tsx

@@ -4,7 +4,6 @@ import Box from "@mui/material/Box";
 import { styled } from "@mui/material/styles";
 import { HEADER_HEIGHT_EDITOR } from "components/Header";
 import React, { useRef } from "react";
-import { useCurrentRoute } from "react-navi";
 
 import Flow from "./components/Flow";
 import Sidebar from "./components/Sidebar";
@@ -19,9 +18,7 @@ const EditorContainer = styled(Box)(() => ({
   maxHeight: `calc(100vh - ${HEADER_HEIGHT_EDITOR}px)`,
 }));
 
-const FlowEditor = () => {
-  const [ flow, ...breadcrumbs ] = useCurrentRoute().url.pathname.split("/").at(-1)?.split(",") || [];
-
+const FlowEditor: React.FC<any> = ({ flow, breadcrumbs }) => {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   useScrollControlsAndRememberPosition(scrollContainerRef);
   const showSidebar = useStore((state) => state.showSidebar);

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

@@ -5,9 +5,7 @@ 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",
@@ -48,9 +46,6 @@ 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/AuthenticatedLayout.tsx

@@ -3,7 +3,6 @@ import { containerClasses } from "@mui/material/Container";
 import { styled } from "@mui/material/styles";
 import EditorNavMenu from "components/EditorNavMenu";
 import { HEADER_HEIGHT_EDITOR } from "components/Header";
-import RouteLoadingIndicator from "components/RouteLoadingIndicator";
 import React, { PropsWithChildren } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -37,7 +36,6 @@ const DashboardContainer = styled(Box)(({ theme }) => ({
 
 const Layout: React.FC<PropsWithChildren> = ({ children }) => (
   <>
-    <RouteLoadingIndicator />
     <Header />
     <DashboardWrap>
       <EditorNavMenu />

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

@@ -1,13 +1,9 @@
 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}>
-    <FlowEditor />
-    {children}
-  </ErrorBoundary>
+  <ErrorBoundary FallbackComponent={ErrorFallback}>{children}</ErrorBoundary>
 );
 
 export default FlowEditorLayout;