rename frontend routes and views, not /preview yet

editor.planx.uk/src/components/Header.test.tsx

@@ -106,7 +106,7 @@ describe("Header Component - Editor Route", () => {
   });
 });
 
-for (const route of ["/preview", "/unpublished", "/pay", "/invite"]) {
+for (const route of ["/preview", "/amber", "/draft", "/pay", "/invite"]) {
   describe(`Header Component - ${route} Routes`, () => {
     beforeAll(() => {
       jest.spyOn(ReactNavi, "useCurrentRoute").mockImplementation(

editor.planx.uk/src/lib/graphql.ts

@@ -174,7 +174,7 @@ export const client = new ApolloClient({
 
 /**
  * Client used to make requests in all public interface
- * e.g. /preview, /unpublished, /pay
+ * e.g. /preview, /amber, /draft, /pay
  */
 export const publicClient = new ApolloClient({
   link: from([retryLink, errorLink, publicHttpLink]),

editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx

@@ -329,9 +329,9 @@ const PreviewBrowser: React.FC<{
           )}
 
           {isPlatformAdmin && (
-            <Tooltip arrow title="Open unpublished service">
+            <Tooltip arrow title="Open draft service">
               <Link
-                href={props.url.replace("/preview", "/unpublished")}
+                href={props.url.replace("/preview", "/draft")}
                 target="_blank"
                 rel="noopener noreferrer"
                 color="inherit"
@@ -341,9 +341,9 @@ const PreviewBrowser: React.FC<{
             </Tooltip>
           )}
 
-          <Tooltip arrow title="Open preview of published service">
+          <Tooltip arrow title="Open preview of changes to publish">
             <Link
-              href={props.url.replace("/preview", "/publish-preview")}
+              href={props.url.replace("/preview", "/amber")}
               target="_blank"
               rel="noopener noreferrer"
               color="inherit"

editor.planx.uk/src/routes/unpublished.tsx → editor.planx.uk/src/routes/draft.tsx

@@ -3,14 +3,14 @@ import ContentPage from "pages/Preview/ContentPage";
 import Questions from "pages/Preview/Questions";
 import React from "react";
 
-import { unpublishedView } from "./views/unpublished";
+import { draftView } from "./views/draft";
 
 const routes = compose(
   withData(async (req) => ({
     mountpath: req.mountpath,
   })),
 
-  withView(async (req) => await unpublishedView(req)),
+  withView(async (req) => await draftView(req)),
 
   mount({
     "/": route({

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

@@ -63,16 +63,16 @@ const mountPayRoutes = () =>
 
 export default isPreviewOnlyDomain
   ? mount({
-      "/:team/:flow/preview": lazy(() => import("./preview")), // XXX: keeps old URL working, but only for the team listed in the domain.
-      "/:flow": lazy(() => import("./preview")),
+      "/:team/:flow/preview": lazy(() => import("./published")), // XXX: keeps old URL working, but only for the team listed in the domain.
+      "/:flow": lazy(() => import("./published")),
       "/:flow/pay": mountPayRoutes(),
       // XXX: We're not sure where to redirect `/` to so for now we'll just return the default 404
       // "/": redirect("somewhere?"),
     })
   : mount({
-      "/:team/:flow/preview": lazy(() => import("./preview")), // loads published flow if exists, or throws Not Found if unpublished
-      "/:team/:flow/publish-preview": lazy(() => import("./publishedPreview")), // loads current draft flow and published external portals, or throws Not Found if any external portal is unpublished
-      "/:team/:flow/unpublished": lazy(() => import("./unpublished")), // loads current draft flow and draft external portals
+      "/:team/:flow/preview": lazy(() => import("./published")), // loads published flow if exists, or throws Not Found if unpublished
+      "/:team/:flow/amber": lazy(() => import("./preview")), // loads current draft flow and published external portals, or throws Not Found if any external portal is unpublished
+      "/:team/:flow/draft": lazy(() => import("./draft")), // loads current draft flow and draft external portals
       "/:team/:flow/pay": mountPayRoutes(),
       "*": editorRoutes,
     });

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

@@ -3,29 +3,18 @@ import ContentPage from "pages/Preview/ContentPage";
 import Questions from "pages/Preview/Questions";
 import React from "react";
 
-import { getTeamFromDomain, validateTeamRoute } from "./utils";
-import { publishedView } from "./views/published";
+import { previewView } from "./views/preview";
 
 const routes = compose(
-  withData(async (req) => {
-    const externalDomainTeam = await getTeamFromDomain(
-      window.location.hostname,
-    );
+  withData(async (req) => ({
+    mountpath: req.mountpath,
+  })),
 
-    return {
-      mountpath: req.mountpath,
-      isPreviewOnlyDomain: Boolean(externalDomainTeam),
-    };
-  }),
-
-  withView(async (req) => {
-    await validateTeamRoute(req);
-    return await publishedView(req);
-  }),
+  withView(async (req) => await previewView(req)),
 
   mount({
     "/": route({
-      view: <Questions previewEnvironment="standalone" />,
+      view: <Questions previewEnvironment="editor" />,
     }),
     "/pages/:page": map((req) => {
       return route({

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

@@ -0,0 +1,39 @@
+import { compose, map, mount, route, withData, withView } from "navi";
+import ContentPage from "pages/Preview/ContentPage";
+import Questions from "pages/Preview/Questions";
+import React from "react";
+
+import { getTeamFromDomain, validateTeamRoute } from "./utils";
+import { publishedView } from "./views/published";
+
+const routes = compose(
+  withData(async (req) => {
+    const externalDomainTeam = await getTeamFromDomain(
+      window.location.hostname,
+    );
+
+    return {
+      mountpath: req.mountpath,
+      isPreviewOnlyDomain: Boolean(externalDomainTeam),
+    };
+  }),
+
+  withView(async (req) => {
+    await validateTeamRoute(req);
+    return await publishedView(req);
+  }),
+
+  mount({
+    "/": route({
+      view: <Questions previewEnvironment="standalone" />,
+    }),
+    "/pages/:page": map((req) => {
+      return route({
+        view: () => <ContentPage page={req.params.page} />,
+        data: { isContentPage: true },
+      });
+    }),
+  }),
+);
+
+export default routes;

editor.planx.uk/src/routes/views/unpublished.tsx → editor.planx.uk/src/routes/views/draft.tsx

@@ -11,26 +11,25 @@ import { Flow, GlobalSettings } from "types";
 
 import { getTeamFromDomain } from "../utils";
 
-interface UnpublishedViewData {
+interface DraftSettings {
   flows: Flow[];
   globalSettings: GlobalSettings[];
 }
 
 /**
- * View wrapper for /unpublished routes
+ * View wrapper for /draft route
  * Does not display Save & Return layout as progress is not persisted on this route
  */
-export const unpublishedView = async (req: NaviRequest) => {
+export const draftView = async (req: NaviRequest) => {
   const flowSlug = req.params.flow.split(",")[0];
   const teamSlug =
     req.params.team || (await getTeamFromDomain(window.location.hostname));
 
-  const data = await fetchDataForUnpublishedView(flowSlug, teamSlug);
+  const data = await fetchSettingsForDraftView(flowSlug, teamSlug);
   const flow = data.flows[0];
   if (!flow) throw new NotFoundError();
 
-  // /unpublished fetches draft data (aka unpublished) of this flow and each external portal
-  const flowData = await fetchUnpublishedFlattenedFlowData(flow.id);
+  const flowData = await fetchDraftFlattenedFlowData(flow.id);
 
   const state = useStore.getState();
   state.setFlow({ id: flow.id, flow: flowData, flowSlug });
@@ -46,10 +45,10 @@ export const unpublishedView = async (req: NaviRequest) => {
   );
 };
 
-const fetchDataForUnpublishedView = async (
+const fetchSettingsForDraftView = async (
   flowSlug: string,
   teamSlug: string,
-): Promise<UnpublishedViewData> => {
+): Promise<DraftSettings> => {
   try {
     const result = await publicClient.query({
       query: gql`
@@ -82,7 +81,6 @@ const fetchDataForUnpublishedView = async (
             settings
             slug
           }
-
           globalSettings: global_settings {
             footerContent: footer_content
           }
@@ -100,7 +98,7 @@ const fetchDataForUnpublishedView = async (
   }
 };
 
-const fetchUnpublishedFlattenedFlowData = async (
+const fetchDraftFlattenedFlowData = async (
   flowId: string,
 ): Promise<FlowGraph> => {
   const url = `${process.env.REACT_APP_API_URL}/flows/${flowId}/flatten-data?unpublished=true`;

editor.planx.uk/src/routes/views/publishedPreview.tsx → editor.planx.uk/src/routes/views/preview.tsx

@@ -7,24 +7,24 @@ import React from "react";
 import { View } from "react-navi";
 import { getTeamFromDomain } from "routes/utils";
 
-import { fetchDataForPublishedView } from "./published";
+import { fetchSettingsForPublishedView } from "./published";
 
 /**
- * View wrapper for /publish-preview
- * Fetches all necessary data, and sets up Save & Return layout
+ * View wrapper for /amber (in future /preview)
+ * Does not display Save & Return layout as progress is not persisted on this route
  */
-export const publishedPreviewView = async (req: NaviRequest) => {
+export const previewView = async (req: NaviRequest) => {
   const flowSlug = req.params.flow.split(",")[0];
   const teamSlug =
     req.params.team || (await getTeamFromDomain(window.location.hostname));
 
-  // /publish-preview uses the same theme & global settings as /preview
-  const data = await fetchDataForPublishedView(flowSlug, teamSlug);
+  // /amber uses the same theme & global settings as /published
+  const data = await fetchSettingsForPublishedView(flowSlug, teamSlug);
   const flow = data.flows[0];
   if (!flow)
     throw new NotFoundError(`Flow ${flowSlug} not found for ${teamSlug}`);
 
-  // /publish-preview fetches draft data of this flow and the latest published version of each external portal
+  // /amber fetches draft data of this flow and the latest published version of each external portal
   const flowData = await fetchFlattenedFlowData(flow.id);
 
   const state = useStore.getState();
@@ -50,7 +50,7 @@ const fetchFlattenedFlowData = async (flowId: string): Promise<FlowGraph> => {
     console.log(error);
     if (error instanceof AxiosError) {
       alert(
-        `Cannot open /publish-preview, navigate back to the graph to keep editing. \n\n${error.response?.data?.error}`,
+        `Cannot open this view, navigate back to the graph to keep editing. \n\n${error.response?.data?.error}`,
       );
     }
     throw new NotFoundError();

editor.planx.uk/src/routes/views/published.tsx

@@ -11,24 +11,24 @@ import { View } from "react-navi";
 import { getTeamFromDomain, setPath } from "routes/utils";
 import { Flow, GlobalSettings } from "types";
 
-interface PublishedViewData {
-  flows: PreviewFlow[];
+interface PublishedViewSettings {
+  flows: PublishedFlow[];
   globalSettings: GlobalSettings[];
 }
 
-interface PreviewFlow extends Flow {
+interface PublishedFlow extends Flow {
   publishedFlows: Record<"data", Store.flow>[];
 }
 
 /**
- * View wrapper for /preview and /:flowSlug (on custom domains)
+ * View wrapper for /published and /:flowSlug (on custom domains)
  * Fetches all necessary data, and sets up Save & Return layout
  */
 export const publishedView = async (req: NaviRequest) => {
   const flowSlug = req.params.flow.split(",")[0];
   const teamSlug =
     req.params.team || (await getTeamFromDomain(window.location.hostname));
-  const data = await fetchDataForPublishedView(flowSlug, teamSlug);
+  const data = await fetchSettingsForPublishedView(flowSlug, teamSlug);
 
   const flow = data.flows[0];
   if (!flow)
@@ -57,10 +57,10 @@ export const publishedView = async (req: NaviRequest) => {
   );
 };
 
-export const fetchDataForPublishedView = async (
+export const fetchSettingsForPublishedView = async (
   flowSlug: string,
   teamSlug: string,
-): Promise<PublishedViewData> => {
+): Promise<PublishedViewSettings> => {
   try {
     const result = await publicClient.query({
       query: gql`