--wip-- [skip ci]

theopensystemslab · Nov 6, 2023 · 0479b44 · 0479b44
1 parent a52b3bf
commit 0479b44
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 5 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx b/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx
@@ -10,7 +10,13 @@ import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import formatDistanceToNow from "date-fns/formatDistanceToNow";
 import React, { useState } from "react";
-import { ExternalLink, Globe, RefreshCw, Terminal } from "react-feather";
+import {
+  BarChart,
+  ExternalLink,
+  Globe,
+  RefreshCw,
+  Terminal,
+} from "react-feather";
 import { useAsync } from "react-use";
 import Input from "ui/Input";
 
@@ -93,13 +99,15 @@ const PreviewBrowser: React.FC<{
   const [showDebugConsole, setDebugConsoleVisibility] = useState(false);
   const [
     flowId,
+    flowMetabaseLink,
     resetPreview,
     publishFlow,
     lastPublished,
     lastPublisher,
     validateAndDiffFlow,
   ] = useStore((state) => [
     state.id,
+    state.flowMetabaseLink,
     state.resetPreview,
     state.publishFlow,
     state.lastPublished,
@@ -163,6 +171,19 @@ const PreviewBrowser: React.FC<{
             </Link>
           </Tooltip>
 
+          {!!flowMetabaseLink && (
+            <Tooltip arrow title="Open analytics page">
+              <Link
+                href={flowMetabaseLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                color="inherit"
+              >
+                <BarChart />
+              </Link>
+            </Tooltip>
+          )}
+
           <Tooltip arrow title="Open published service">
             <Link
               href={props.url + "?analytics=false"}

diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/shared.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/shared.ts
@@ -13,6 +13,7 @@ export interface SharedStore extends Store.Store {
   flow: Store.flow;
   flowSlug: string;
   flowName: string;
+  flowMetabaseLink: string;
   id: string;
   getNode: (id: Store.nodeId) => Store.node | undefined;
   resetPreview: () => void;
@@ -51,6 +52,8 @@ export const sharedStore: StateCreator<
 
   flowName: "",
 
+  flowMetabaseLink: "",
+
   id: "",
   previewEnvironment: "standalone",
 

diff --git a/editor.planx.uk/src/routes/flow.tsx b/editor.planx.uk/src/routes/flow.tsx
@@ -173,10 +173,10 @@ const nodeRoutes = mount({
   "/:parent/nodes/:id/edit": editNode,
 });
 
-const getFlowSettings = async (
+const getFlowMetadata = async (
   flow: string,
   team: string,
-): Promise<FlowSettings> => {
+): Promise<{ settings: FlowSettings; flowMetabaseLink: string }> => {
   const { data } = await client.query({
     query: gql`
       query GetFlow($slug: String!, $team_slug: String!) {
@@ -186,6 +186,7 @@ const getFlowSettings = async (
         ) {
           id
           settings
+          flowMetabaseLink: metabase_link
         }
       }
     `,
@@ -194,7 +195,11 @@ const getFlowSettings = async (
       team_slug: team,
     },
   });
-  return data.flows[0]?.settings;
+  const metadata = {
+    settings: data.flows[0]?.settings,
+    flowMetabaseLink: data.flows[0]?.flowMetabaseLink,
+  };
+  return metadata;
 };
 
 const routes = compose(
@@ -204,8 +209,12 @@ const routes = compose(
 
   withView(async (req) => {
     const [flow, ...breadcrumbs] = req.params.flow.split(",");
-    const settings: FlowSettings = await getFlowSettings(flow, req.params.team);
+    const { settings, flowMetabaseLink } = await getFlowMetadata(
+      flow,
+      req.params.team,
+    );
     useStore.getState().setFlowSettings(settings);
+    useStore.setState({ flowMetabaseLink });
 
     return (
       <>