dashboard: Analytics (#5827)

* dashboard: Analytics

* dashboard: Analytics wording

"Telemetry data" => "Telemetry"

* Dashboard: Rename server /analytics PUT json payload

* dashboard: Use date object instead of millisecond arithmetic

To figure out if the user should be prompted again to opt in for analytics

* dashboard: Link to analytics policy

When asking user to re-consider opting in for analytics

Author: cliffoo

packages/dashboard/lib/DashboardServer.ts

@@ -2,12 +2,13 @@ import express, { Application, NextFunction, Request, Response } from "express";
 import path from "path";
 import getPort from "get-port";
 import open from "open";
+import { v4 as uuid } from "uuid";
+import Config from "@truffle/config";
 import {
   dashboardProviderMessageType,
   LogMessage,
   logMessageType
 } from "@truffle/dashboard-message-bus-common";
-
 import { DashboardMessageBus } from "@truffle/dashboard-message-bus";
 import { DashboardMessageBusClient } from "@truffle/dashboard-message-bus-client";
 import cors from "cors";
@@ -94,6 +95,30 @@ export class DashboardServer {
       this.expressApp.post("/rpc", this.postRpc.bind(this));
     }
 
+    this.expressApp.get("/analytics", (_req, res) => {
+      const userConfig = Config.getUserConfig();
+      res.json({
+        enableAnalytics: userConfig.get("enableAnalytics"),
+        analyticsSet: userConfig.get("analyticsSet"),
+        analyticsMessageDateTime: userConfig.get("analyticsMessageDateTime")
+      });
+    });
+
+    this.expressApp.put("/analytics", (req, _res) => {
+      const { value } = req.body as { value: boolean };
+
+      const userConfig = Config.getUserConfig();
+
+      const uid = userConfig.get("uniqueId");
+      if (!uid) userConfig.set("uniqueId", uuid());
+
+      userConfig.set({
+        enableAnalytics: !!value,
+        analyticsSet: true,
+        analyticsMessageDateTime: Date.now()
+      });
+    });
+
     this.expressApp.use(express.static(this.frontendPath));
     this.expressApp.get("*", (_req, res) => {
       res.sendFile("index.html", { root: this.frontendPath });

packages/dashboard/package.json

@@ -38,6 +38,7 @@
     "@mantine/notifications": "^5.0.0",
     "@mantine/prism": "^5.0.0",
     "@truffle/codec": "^0.14.12",
+    "@truffle/config": "^1.3.48",
     "@truffle/dashboard-message-bus": "^0.1.10",
     "@truffle/dashboard-message-bus-client": "^0.1.9",
     "@truffle/dashboard-message-bus-common": "^0.1.5",
@@ -56,6 +57,7 @@
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
     "react-router-dom": "^6.3.0",
+    "uuid": "^9.0.0",
     "wagmi": "^0.6.3",
     "ws": "^7.2.0"
   },

packages/dashboard/src/components/composed/Layout.tsx

@@ -1,8 +1,20 @@
+import { useEffect } from "react";
 import { AppShell, createStyles } from "@mantine/core";
+import {
+  showNotification,
+  updateNotification,
+  hideNotification
+} from "@mantine/notifications";
 import { Outlet } from "react-router-dom";
 import { useDash } from "src/hooks";
 import Sidebar from "src/components/composed/Sidebar";
 import Notice from "src/components/composed/Notice";
+import {
+  analyticsNotifications,
+  analyticsNotificationId
+} from "src/utils/notifications";
+
+const ARBITRARY_ANALYTICS_NEXT_ASK_THRESHOLD_IN_DAYS = 365;
 
 const useStyles = createStyles((_theme, _params, _getRef) => ({
   main: {
@@ -13,10 +25,54 @@ const useStyles = createStyles((_theme, _params, _getRef) => ({
 
 function Layout(): JSX.Element {
   const {
-    state: { notice }
+    state: { notice, analyticsConfig },
+    operations: { updateAnalyticsConfig }
   } = useDash()!;
   const { classes } = useStyles();
 
+  // Analytics notifications
+  useEffect(() => {
+    // Don't ask if...
+    if (
+      // There's currently a fullscreen notice
+      notice.show ||
+      // Analytics is already enabled
+      analyticsConfig.enableAnalytics ||
+      // Analytics config info is not in state yet
+      analyticsConfig.analyticsMessageDateTime === null
+    )
+      return;
+
+    const askAfter = new Date(analyticsConfig.analyticsMessageDateTime);
+    askAfter.setDate(
+      askAfter.getDate() + ARBITRARY_ANALYTICS_NEXT_ASK_THRESHOLD_IN_DAYS
+    );
+
+    const shouldAsk = !analyticsConfig.analyticsSet;
+    const shouldAskAgain = new Date() > askAfter;
+
+    const analyticsNotificationArgs = [
+      () => {
+        updateAnalyticsConfig(true);
+        updateNotification(analyticsNotifications["thank"]());
+      },
+      () => {
+        updateAnalyticsConfig(false);
+        hideNotification(analyticsNotificationId);
+      }
+    ];
+
+    if (shouldAsk) {
+      showNotification(
+        analyticsNotifications["ask"](...analyticsNotificationArgs)
+      );
+    } else if (shouldAskAgain) {
+      showNotification(
+        analyticsNotifications["ask-again"](...analyticsNotificationArgs)
+      );
+    }
+  }, [notice, analyticsConfig, updateAnalyticsConfig]);
+
   return (
     <AppShell
       navbar={<Sidebar />}

packages/dashboard/src/contexts/DashContext/DashContext.ts

@@ -13,6 +13,7 @@ export interface ContextValue {
       lifecycle: ReceivedMessageLifecycle<DashboardProviderMessage>
     ) => any;
     toggleNotice: () => void;
+    updateAnalyticsConfig: (value: boolean) => void;
   };
   dispatch?: React.Dispatch<Action>;
 }

packages/dashboard/src/contexts/DashContext/DashProvider.tsx

@@ -150,10 +150,11 @@ function DashProvider({ children }: DashProviderProps): JSX.Element {
     if (initCalled.current) return;
     initCalled.current = true;
 
+    const { busClient } = state;
+    const { host, port } = busClient.options;
+
     const initBusClient = async () => {
-      const { busClient } = state;
       await busClient.ready();
-      const { host, port } = busClient.options;
       console.debug(`Connected to message bus at ws://${host}:${port}`);
 
       // Message bus client subscribes to and handles messages
@@ -221,9 +222,17 @@ function DashProvider({ children }: DashProviderProps): JSX.Element {
       });
     };
 
+    const initAnalytics = async () => {
+      const res = await fetch(`http://${host}:${port}/analytics`);
+      const data = await res.json();
+
+      dispatch({ type: "set-analytics-config", data });
+    };
+
     const init = async () => {
       await initDecoder();
       await initBusClient();
+      await initAnalytics();
     };
 
     init();
@@ -268,7 +277,16 @@ function DashProvider({ children }: DashProviderProps): JSX.Element {
       lifecycle: ReceivedMessageLifecycle<DashboardProviderMessage>
     ) => void rejectMessage(lifecycle, "USER"),
     toggleNotice: () =>
-      void dispatch({ type: "set-notice", data: { show: !state.notice.show } })
+      void dispatch({ type: "set-notice", data: { show: !state.notice.show } }),
+    updateAnalyticsConfig: async (value: boolean) => {
+      const { host, port } = state.busClient.options;
+      await fetch(`http://${host}:${port}/analytics`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ value })
+      });
+      // No need to update state afterwards
+    }
   };
 
   return (

packages/dashboard/src/contexts/DashContext/state.ts

@@ -46,6 +46,11 @@ export const initialState: State = {
   notice: {
     show: false,
     type: "LOADING"
+  },
+  analyticsConfig: {
+    enableAnalytics: null,
+    analyticsSet: null,
+    analyticsMessageDateTime: null
   }
 };
 
@@ -58,6 +63,8 @@ export const reducer = (state: State, action: Action): State => {
       return { ...state, chainInfo: data };
     case "set-notice":
       return { ...state, notice: { ...state.notice, ...data } };
+    case "set-analytics-config":
+      return { ...state, analyticsConfig: data };
     case "handle-message":
       // Copy state,
       // modify it depending on message type,

packages/dashboard/src/contexts/DashContext/types/Action.ts

@@ -6,6 +6,7 @@ export type ActionType =
   | "set-decoder"
   | "set-chain-info"
   | "set-notice"
+  | "set-analytics-config"
   | "handle-message";
 
 export interface BaseAction {
@@ -30,6 +31,11 @@ export interface SetNoticeAction extends BaseAction {
   data: Partial<State["notice"]>;
 }
 
+export interface SetAnalyticsConfigAction extends BaseAction {
+  type: "set-analytics-config";
+  data: State["analyticsConfig"];
+}
+
 export interface HandleMessageAction extends BaseAction {
   type: "handle-message";
   data: ReceivedMessageLifecycle<Message>;
@@ -39,4 +45,5 @@ export type Action =
   | SetDecoderAction
   | SetChainInfoAction
   | SetNoticeAction
+  | SetAnalyticsConfigAction
   | HandleMessageAction;

packages/dashboard/src/contexts/DashContext/types/State.ts

@@ -28,4 +28,9 @@ export interface State {
     show: boolean;
     type: NoticeContent | null;
   };
+  analyticsConfig: {
+    enableAnalytics: boolean | null;
+    analyticsSet: boolean | null;
+    analyticsMessageDateTime: number | null;
+  };
 }

packages/dashboard/src/utils/notifications/analytics.tsx

@@ -0,0 +1,75 @@
+import { Stack, Group, Button, Text, Anchor } from "@mantine/core";
+import type { NotificationProps } from "@mantine/notifications";
+
+type NotificationPropsWithId = NotificationProps & { id: string };
+
+export const analyticsNotificationId = "analytics";
+
+const baseNotification = {
+  autoClose: false,
+  disallowClose: true,
+  id: analyticsNotificationId
+};
+
+export const analyticsNotifications: Record<
+  "ask" | "ask-again" | "thank",
+  (enable?: () => void, disable?: () => void) => NotificationPropsWithId
+> = {
+  "ask": (enable, disable) => ({
+    ...baseNotification,
+    title: "Help improve Truffle",
+    message: (
+      <Stack>
+        <Text>
+          You can help us improve Truffle by allowing us to track how you use
+          our tools. Would you like to share anonymous telemetry? View the
+          Truffle Analytics policy&nbsp;
+          <Anchor href="https://trufflesuite.com/analytics" target="_blank">
+            here
+          </Anchor>
+          .
+        </Text>
+        <Group grow>
+          <Button onClick={disable} color="gray" variant="light">
+            Dismiss
+          </Button>
+          <Button onClick={enable} variant="outline">
+            Enable
+          </Button>
+        </Group>
+      </Stack>
+    ),
+    color: "yellow"
+  }),
+  "ask-again": (enable, disable) => ({
+    ...baseNotification,
+    title: "Telemetry is currently disabled",
+    message: (
+      <Stack>
+        <Text>
+          Would you consider enabling it? It helps us make Truffle a better
+          experience for you. View the Truffle Analytics policy&nbsp;
+          <Anchor href="https://trufflesuite.com/analytics" target="_blank">
+            here
+          </Anchor>
+          .
+        </Text>
+        <Group grow>
+          <Button onClick={disable} color="gray" variant="light">
+            No
+          </Button>
+          <Button onClick={enable} variant="outline">
+            Enable
+          </Button>
+        </Group>
+      </Stack>
+    ),
+    color: "yellow"
+  }),
+  "thank": () => ({
+    ...baseNotification,
+    title: "Telemetry is now enabled",
+    message: "Thank you!",
+    autoClose: 1500
+  })
+};

packages/dashboard/src/utils/notifications/index.ts

@@ -1 +1,2 @@
 export * from "src/utils/notifications/decode";
+export * from "src/utils/notifications/analytics";