From f44bcbb4dc69fccd7d0cbcf409c05ad876e45b59 Mon Sep 17 00:00:00 2001
From: Mike <36415632+Mike-Heneghan@users.noreply.github.com>
Date: Thu, 9 Nov 2023 11:34:48 +0000
Subject: [PATCH] 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
---
 .../FlowEditor/components/PreviewBrowser.tsx  | 29 ++++++++++++++++++-
 .../src/pages/FlowEditor/lib/store/shared.ts  |  3 ++
 editor.planx.uk/src/routes/flow.tsx           | 20 +++++++++----
 hasura.planx.uk/metadata/tables.yaml          |  2 ++
 .../down.sql                                  |  1 +
 .../up.sql                                    |  2 ++
 6 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 hasura.planx.uk/migrations/1699453886259_alter_table_public_flows_add_column_analytics_link/down.sql
 create mode 100644 hasura.planx.uk/migrations/1699453886259_alter_table_public_flows_add_column_analytics_link/up.sql

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx b/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx
index aa762dce73..65d772e9e9 100644
--- 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,6 +99,7 @@ const PreviewBrowser: React.FC<{
   const [showDebugConsole, setDebugConsoleVisibility] = useState(false);
   const [
     flowId,
+    flowAnalyticsLink,
     resetPreview,
     publishFlow,
     lastPublished,
@@ -100,6 +107,7 @@ const PreviewBrowser: React.FC<{
     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")}
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/shared.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/shared.ts
index 851ff93b41..8dc1bdc45d 100644
--- 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;
+  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",
 
diff --git a/editor.planx.uk/src/routes/flow.tsx b/editor.planx.uk/src/routes/flow.tsx
index c8f4ede53d..caa1bd796c 100644
--- 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<{ 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 (
       <>
diff --git a/hasura.planx.uk/metadata/tables.yaml b/hasura.planx.uk/metadata/tables.yaml
index 92521ab7aa..6af2933a4e 100644
--- a/hasura.planx.uk/metadata/tables.yaml
+++ b/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
diff --git a/hasura.planx.uk/migrations/1699453886259_alter_table_public_flows_add_column_analytics_link/down.sql b/hasura.planx.uk/migrations/1699453886259_alter_table_public_flows_add_column_analytics_link/down.sql
new file mode 100644
index 0000000000..5aa66133a8
--- /dev/null
+++ b/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";
\ No newline at end of file
diff --git a/hasura.planx.uk/migrations/1699453886259_alter_table_public_flows_add_column_analytics_link/up.sql b/hasura.planx.uk/migrations/1699453886259_alter_table_public_flows_add_column_analytics_link/up.sql
new file mode 100644
index 0000000000..7d091e7dcf
--- /dev/null
+++ b/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;
\ No newline at end of file