feat: Add a link to each service's analytics page in the editor (#2387)

* feat: conditionally render link to analytics in PreviewBrowser


- Add new analytics_link column to the flow table
- Add analytics_link via bar chart icon in the editor PreviewBrowser
- Disable the link if there is no analytics_link associated with the flow

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,
+    flowAnalyticsLink,
     resetPreview,
     publishFlow,
     lastPublished,
     lastPublisher,
     validateAndDiffFlow,
   ] = useStore((state) => [
     state.id,
+    state.flowAnalyticsLink,
     state.resetPreview,
     state.publishFlow,
     state.lastPublished,
@@ -152,6 +160,25 @@ const PreviewBrowser: React.FC<{
             />
           </Tooltip>
 
+          {flowAnalyticsLink ? (
+            <Tooltip arrow title="Open analytics page">
+              <Link
+                href={flowAnalyticsLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                color="inherit"
+              >
+                <BarChart />
+              </Link>
+            </Tooltip>
+          ) : (
+            <Tooltip arrow title="Analytics page unavailable">
+              <Link component={"button"} disabled aria-disabled={true}>
+                <BarChart />
+              </Link>
+            </Tooltip>
+          )}
+
           <Tooltip arrow title="Open editor preview">
             <Link
               href={props.url.replace("/preview", "/unpublished")}

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;
+  flowAnalyticsLink: string | null;
   id: string;
   getNode: (id: Store.nodeId) => Store.node | undefined;
   resetPreview: () => void;
@@ -51,6 +52,8 @@ export const sharedStore: StateCreator<
 
   flowName: "",
 
+  flowAnalyticsLink: null,
+
   id: "",
   previewEnvironment: "standalone",
 

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<{ flowSettings: FlowSettings; flowAnalyticsLink: string }> => {
   const { data } = await client.query({
     query: gql`
       query GetFlow($slug: String!, $team_slug: String!) {
@@ -185,7 +185,8 @@ const getFlowSettings = async (
           where: { slug: { _eq: $slug }, team: { slug: { _eq: $team_slug } } }
         ) {
           id
-          settings
+          flowSettings: settings
+          flowAnalyticsLink: analytics_link
         }
       }
     `,
@@ -194,7 +195,11 @@ const getFlowSettings = async (
       team_slug: team,
     },
   });
-  return data.flows[0]?.settings;
+  const metadata = {
+    flowSettings: data.flows[0]?.flowSettings,
+    flowAnalyticsLink: data.flows[0]?.flowAnalyticsLink,
+  };
+  return metadata;
 };
 
 const routes = compose(
@@ -204,8 +209,11 @@ const routes = compose(
 
   withView(async (req) => {
     const [flow, ...breadcrumbs] = req.params.flow.split(",");
-    const settings: FlowSettings = await getFlowSettings(flow, req.params.team);
-    useStore.getState().setFlowSettings(settings);
+    const { flowSettings, flowAnalyticsLink } = await getFlowMetadata(
+      flow,
+      req.params.team,
+    );
+    useStore.setState({ flowSettings, flowAnalyticsLink });
 
     return (
       <>

hasura.planx.uk/metadata/tables.yaml

@@ -356,6 +356,7 @@
           - creator_id
           - data
           - id
+          - analytics_link
           - settings
           - slug
           - team_id
@@ -386,6 +387,7 @@
           - creator_id
           - data
           - id
+          - analytics_link
           - settings
           - slug
           - team_id

hasura.planx.uk/migrations/1699453886259_alter_table_public_flows_add_column_analytics_link/down.sql

@@ -0,0 +1 @@
+ALTER TABLE "public"."flows" DROP COLUMN "analytics_link";

hasura.planx.uk/migrations/1699453886259_alter_table_public_flows_add_column_analytics_link/up.sql

@@ -0,0 +1,2 @@
+alter table "public"."flows" add column "analytics_link" text
+null;