integrate june tracking tool (#2126)

.env.local.example

@@ -10,5 +10,4 @@ NEXT_PUBLIC_EMAIL_VERIFICATION_MODE=
 
 NEXT_PUBLIC_RECAPTCHA_SITE_KEY=
 NEXT_PUBLIC_HUBSPOT_STRIPE_FORM_ID=
-NEXT_PUBLIC_HUBSPOT_LOGIN_FORM_ID=
-NEXT_PUBLIC_RIPE_API_KEY=
+NEXT_PUBLIC_HUBSPOT_LOGIN_FORM_ID=

packages/www/components/Admin/SuspendUserModal/index.tsx

@@ -30,6 +30,7 @@ const SuspendUserModal = ({ user, isOpen, onClose, onSuspend }: Props) => {
 
       <Box sx={{ display: "flex", mt: 2, mb: 2 }}>
         <Checkbox
+          placeholder="isCopyrightInfringiment"
           id="isCopyrightInfringiment"
           checked={isCopyrightInfringiment}
           style={{ color: "black" }}

packages/www/components/Admin/Table-v2/index.tsx

@@ -199,7 +199,7 @@ const Table = <T extends Record<string, unknown>>({
                 }
                 return (
                   <Box
-                    key={`${f.type}-${f.props.columnId}`}
+                    key={`${f.type}-${String(f.props.columnId)}`}
                     sx={{ ":not(:last-of-type)": { mr: 3 } }}>
                     {filter}
                   </Box>

packages/www/components/ApiKeys/CreateDialog.tsx

@@ -164,6 +164,7 @@ const CreateDialog = ({
 
                 <Box css={{ display: "flex", mt: "$2", alignItems: "center" }}>
                   <Checkbox
+                    placeholder="allowCors"
                     id="allowCors"
                     checked={allowCors}
                     disabled={isAdmin}
@@ -286,6 +287,7 @@ const CreateDialog = ({
 
                     <Box css={{ display: "flex", mt: "$2" }}>
                       <Checkbox
+                        placeholder="corsFullAccess"
                         id="corsFullAccess"
                         checked={cors.fullAccess ?? false}
                         onCheckedChange={(checked: boolean) =>

packages/www/components/ApiKeys/index.tsx

@@ -16,6 +16,7 @@ import {
 } from "./helpers";
 import { makeCreateAction, makeSelectAction } from "../Table/helpers";
 import TableStateDeleteDialog from "../Table/components/TableStateDeleteDialog";
+import { useJune, events } from "hooks/use-june";
 
 const ApiKeysTable = ({
   title = "API Keys",
@@ -32,6 +33,7 @@ const ApiKeysTable = ({
   const deleteDialogState = useToggleState();
   const createDialogState = useToggleState();
   const columns = useMemo(makeColumns, []);
+  const June = useJune();
 
   const fetcher: Fetcher<ApiKeysTableData> = useCallback(
     async () => rowsPageFromState(userId, getApiTokens),
@@ -50,10 +52,10 @@ const ApiKeysTable = ({
         initialSortBy={[DefaultSortBy]}
         emptyState={makeEmptyState(createDialogState)}
         selectAction={makeSelectAction("Delete", deleteDialogState.onOn)}
-        createAction={makeCreateAction(
-          "Create API Key",
-          createDialogState.onOn
-        )}
+        createAction={makeCreateAction("Create API Key", () => {
+          June.track(events.developer.apiKeyCreate);
+          return createDialogState.onOn();
+        })}
       />
 
       <TableStateDeleteDialog

packages/www/components/AssetDetails/AssetHeadingBox.tsx

@@ -33,6 +33,7 @@ const AssetHeadingBox = ({ asset, totalViews }: AssetHeadingBoxProps) => {
         {totalViews != undefined ? (
           <Tooltip
             css={{ bc: "$neutral3", color: "$neutral3" }}
+            // @ts-ignore
             content={
               <Box css={{ color: "$hiContrast" }}>
                 Views are defined as at least 1 second of watch time.

packages/www/components/AssetDetails/AssetSharePopup.tsx

@@ -38,7 +38,10 @@ const AssetSharePopup = ({
     <Popover>
       <PopoverTrigger asChild>{triggerNode}</PopoverTrigger>
 
-      <PopoverContent hideArrow={false} css={{ padding: "$2" }}>
+      <PopoverContent
+        placeholder="Share"
+        hideArrow={false}
+        css={{ padding: "$2" }}>
         <Flex
           css={{
             gap: "$1",

packages/www/components/AssetDetails/EmbedVideoDialog.tsx

@@ -40,6 +40,7 @@ const EmbedVideoDialog = ({
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent
+        placeholder="Embed Video"
         css={{
           maxWidth: 450,
           minWidth: 350,

packages/www/components/FileUpload/FileItem.tsx

@@ -22,7 +22,11 @@ const FileItem = ({ fileUpload }: { fileUpload: FileUpload }) => {
       {"100% uploaded"}
     </Text>
   ) : (
-    <ProgressBar variant="gray" value={(progress ?? 0) * 100} />
+    <ProgressBar
+      placeholder="Progress bar"
+      variant="gray"
+      value={(progress ?? 0) * 100}
+    />
   );
 
   const accessoryChildren = completed ? (

packages/www/components/GettingStarted/index.tsx

@@ -20,9 +20,14 @@ const GettingStarted = ({ firstName = "" }) => {
         Welcome to Livepeer Studio{firstName && `, ${firstName}`}
       </Heading>
       <Box css={{ bc: "$panel" }}>
-        <Accordion type="single" defaultValue="accordion-one">
+        <Accordion
+          placeholder="Getting Started"
+          type="single"
+          defaultValue="accordion-one">
           <AccordionItem value="accordion-one">
-            <AccordionTrigger css={{ color: "$primary12" }}>
+            <AccordionTrigger
+              placeholder="upload video accordion"
+              css={{ color: "$primary12" }}>
               <Text size="4" css={{ color: "inherit" }}>
                 Upload your first video
               </Text>
@@ -71,7 +76,9 @@ const GettingStarted = ({ firstName = "" }) => {
             </AccordionContent>
           </AccordionItem>
           <AccordionItem value="accordion-two">
-            <AccordionTrigger css={{ color: "$primary12" }}>
+            <AccordionTrigger
+              placeholder="Create your first livestream"
+              css={{ color: "$primary12" }}>
               <Text size="4" css={{ color: "inherit" }}>
                 Create your first livestream
               </Text>
@@ -121,7 +128,9 @@ const GettingStarted = ({ firstName = "" }) => {
             </AccordionContent>
           </AccordionItem>
           <AccordionItem value="accordion-three">
-            <AccordionTrigger css={{ color: "$primary12" }}>
+            <AccordionTrigger
+              placeholder="Integrate with your app"
+              css={{ color: "$primary12" }}>
               <Text size="4" css={{ color: "inherit" }}>
                 Integrate with your app
               </Text>

packages/www/components/Header/index.tsx

@@ -20,6 +20,7 @@ import PolygonIcon from "../../public/img/icons/polygonWithoutBorderBottom.svg";
 import CheckedIcon from "../../public/img/icons/checked.svg";
 import { useEffect, useState, useRef } from "react";
 import { useApi, useHubspotForm } from "hooks";
+import { useJune, events } from "hooks/use-june";
 
 const StyledHornIcon = styled(HornIcon, {
   color: "$hiContrast",
@@ -53,6 +54,7 @@ const Header = ({ breadcrumbs = [] }) => {
     portalId: process.env.NEXT_PUBLIC_HUBSPOT_PORTAL_ID,
     formId: process.env.NEXT_PUBLIC_HUBSPOT_FEEDBACK_FORM_ID,
   });
+  const June = useJune();
 
   useEffect(() => {
     if (data) {
@@ -111,6 +113,7 @@ const Header = ({ breadcrumbs = [] }) => {
                 as={A}
                 target="_blank"
                 size={2}
+                onClick={() => June.track(events.all.documentation)}
                 css={{
                   cursor: "default",
                   color: "$hiContrast",
@@ -131,6 +134,7 @@ const Header = ({ breadcrumbs = [] }) => {
             <Button
               ghost
               as={DropdownMenuTrigger}
+              onClick={() => June.track(events.all.feedback)}
               size={2}
               css={{
                 mr: "$2",
@@ -147,6 +151,7 @@ const Header = ({ breadcrumbs = [] }) => {
               <Box>Feedback</Box>
             </Button>
             <DropdownMenuContent
+              placeholder="Feedback"
               css={{
                 padding: "18px 0 12px",
                 position: "relative",

packages/www/components/Sidebar/index.tsx

@@ -30,6 +30,7 @@ import { useApi } from "../../hooks";
 import Router from "next/router";
 import { RocketIcon, ChatBubbleIcon, LoopIcon } from "@radix-ui/react-icons";
 import Contact from "../Contact";
+import { useJune, events } from "hooks/use-june";
 
 export const NavLink = styled(A, {
   fontSize: 14,
@@ -72,6 +73,9 @@ export type SidebarId =
 
 const Sidebar = ({ id }: { id: SidebarId }) => {
   const { user, logout } = useApi();
+  const June = useJune();
+
+  June?.track(`sidebar ${id}`);
 
   return (
     <Box
@@ -97,6 +101,7 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
               p: 0,
             }}>
             <Avatar
+              placeholder="user"
               size="3"
               alt={user?.firstName}
               fallback={
@@ -116,7 +121,9 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
               css={{ width: 20, height: 20, color: "$hiContrast" }}
             />
           </Flex>
-          <DropdownMenuContent css={{ border: "1px solid $colors$neutral6" }}>
+          <DropdownMenuContent
+            placeholder="dropdown-menu-content"
+            css={{ border: "1px solid $colors$neutral6" }}>
             <DropdownMenuGroup>
               <DropdownMenuItem
                 key="billing-dropdown-item"

packages/www/components/Site/Footer/index.tsx

@@ -25,6 +25,7 @@ const queryClient = new QueryClient();
 
 function useSiteConfig() {
   return useQuery(["siteConfig"], async () => {
+    // @ts-ignore
     const { SiteConfig } = await request(
       "https://dp4k3mpw.api.sanity.io/v1/graphql/production/default",
       print(siteConfig)

packages/www/components/Site/Navigation/base.tsx

@@ -169,6 +169,7 @@ const NavigationBase = ({
                           </A>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent
+                          placeholder="dropdown-menu-content"
                           align="start"
                           css={{
                             p: 0,

packages/www/components/Site/OneAPI/index.tsx

@@ -157,6 +157,7 @@ export const StartBuilding = ({ backgroundColor = "$loContrast" }) => (
           justifyContent: "center",
         }}>
         <TabsList
+          placeholder="Select a workflow"
           css={{
             alignSelf: "center",
             width: "auto",

packages/www/components/Site/RegionSelector/index.tsx

@@ -12,6 +12,7 @@ import { useState } from "react";
 
 const Item = ({ active = false, language, locale, flag, ...props }) => (
   <DropdownMenuCheckboxItem
+    placeholder="Language"
     css={{
       borderRadius: 3,
       display: "flex",
@@ -97,6 +98,7 @@ const LanguageDropdown = ({ navBackgroundColor }) => {
         </Box>
       </DropdownMenuTrigger>
       <DropdownMenuContent
+        placeholder="dropdown-menu-content"
         css={{
           minWidth: 300,
           backgroundColor: "#ffffff",

packages/www/components/StreamDetails/MultistreamTargetsTable/SaveTargetDialog.tsx

@@ -320,6 +320,7 @@ const SaveTargetDialog = ({
                   {profileOpts.map((p) => (
                     <Box key={p.name} css={{ display: "flex", mb: "$2" }}>
                       <Radio
+                        placeholder="Profile"
                         value={p.name}
                         id={`profile-${p.name}`}
                         checked={state.profile === p.name}
@@ -339,6 +340,7 @@ const SaveTargetDialog = ({
 
             <Box css={{ display: "flex" }}>
               <Checkbox
+                placeholder="videoOnly"
                 id="videoOnly"
                 checked={state.videoOnly}
                 onCheckedChange={(checked: boolean) =>

packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx

@@ -209,6 +209,7 @@ const Toolbox = ({
   return (
     <Flex align="center" gap="2" justify="end">
       <Switch
+        placeholder="Multistream target toggle"
         name="multistream-target-toggle"
         disabled={!target}
         checked={!target?.disabled}
@@ -234,7 +235,7 @@ const Toolbox = ({
             <Overflow />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
+        <DropdownMenuContent placeholder="dropdown-menu-content" align="end">
           <DropdownMenuGroup>
             <DropdownMenuItem
               disabled={!target}

packages/www/components/StreamDetails/MultistreamTargetsTable/index.tsx

@@ -14,6 +14,7 @@ import SaveTargetDialog, { Action } from "./SaveTargetDialog";
 import { makeColumns, makeTableData, TargetsTableData } from "./helpers";
 import { makeCreateAction } from "components/Table/helpers";
 import { getMultistreamTarget } from "hooks/use-api/endpoints/multistream";
+import { useJune, events } from "hooks/use-june";
 
 const MultistreamTargetsTable = ({
   title = "Multistream Targets",
@@ -41,6 +42,7 @@ const MultistreamTargetsTable = ({
   const saveDialogState = useToggleState();
 
   const columns = useMemo(makeColumns, []);
+  const June = useJune();
 
   const targetQueryKey = (id: string) => ["multistreamTarget", id];
   const invalidateTargetId = useCallback(
@@ -75,7 +77,10 @@ const MultistreamTargetsTable = ({
     [state.tableId, stream, streamHealth, invalidateTargetId, targetRefs]
   );
 
-  const onCreateClick = saveDialogState.onOn;
+  const onCreateClick = () => {
+    June.track(events.stream.multistreamTarget);
+    return saveDialogState.onOn();
+  };
 
   return (
     <Box {...props}>

packages/www/components/StreamDetails/Record.tsx

@@ -7,13 +7,16 @@ import {
 import { useToggleState } from "hooks/use-toggle-state";
 import { useApi } from "../../hooks";
 import ErrorDialog from "../ErrorDialog";
+import { useJune, events } from "hooks/use-june";
 
 const Record = ({ stream, invalidate, isSwitch = true }) => {
   const { patchStream } = useApi();
   const [openSnackbar] = useSnackbar();
   const errorRecordDialogState = useToggleState();
+  const June = useJune();
 
   const onCheckedChange = async () => {
+    June.track(events.stream.recordingToggle);
     if (stream.isActive) {
       errorRecordDialogState.onOn();
     } else if (!stream.record) {
@@ -31,6 +34,7 @@ const Record = ({ stream, invalidate, isSwitch = true }) => {
     <Box>
       {isSwitch ? (
         <Switch
+          placeholder="Record mode"
           checked={!!stream.record}
           name="record-mode"
           value={`${!!stream.record}`}

packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx

@@ -84,7 +84,7 @@ const StreamChildrenHeadingBox = ({
               <Box as={ChevronDownIcon} css={{ ml: "$1" }} />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
+          <DropdownMenuContent placeholder="dropdown-menu-content" align="end">
             <DropdownMenuGroup>
               <Record
                 stream={stream}

packages/www/components/StreamDetails/StreamHealthTab.tsx

@@ -6,6 +6,7 @@ import Logger from "components/Logger";
 import Chart from "components/Chart";
 import HealthChecksTable from "components/StreamDetails/HealthChecksTable";
 import { Text, Box, Heading } from "@livepeer/design-system";
+import { useJune, events } from "hooks/use-june";
 
 const ingestInterval = 10 * 1000;
 const maxItems = 6;
@@ -25,6 +26,7 @@ const StreamHealthTab = ({ stream, streamHealth, invalidateStream }) => {
     { name: 0, "Session bitrate": 0 },
   ]);
 
+  const June = useJune();
   const [multiDataChart, setMultiDataChart] = useState<MultistreamChartType[]>(
     []
   );
@@ -33,6 +35,8 @@ const StreamHealthTab = ({ stream, streamHealth, invalidateStream }) => {
 
   const [info, setInfo] = useState<StreamInfo | null>(null);
 
+  June?.track(events.stream.health);
+
   const { getStreamInfo } = useApi();
 
   const { query } = router;

packages/www/components/StreamDetails/StreamOverviewBox.tsx

@@ -101,6 +101,7 @@ const StreamOverviewBox = ({
               </Box>
               <Tooltip
                 multiline
+                // @ts-ignore
                 content={
                   <Box>
                     When enabled, transcoded streaming sessions will be recorded