EVG-20808 Add analytics events for task file link clicks. (#2110)

src/analytics/task/useTaskAnalytics.ts

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { useParams, useLocation } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { useAnalyticsRoot } from "analytics/useAnalyticsRoot";
 import {
   SaveSubscriptionForUserMutationVariables,
@@ -9,11 +9,9 @@ import {
   TestSortCategory,
 } from "gql/generated/types";
 import { TASK } from "gql/queries";
+import { useQueryParam } from "hooks/useQueryParam";
 import { CommitType } from "pages/task/actionButtons/previousCommits/types";
 import { RequiredQueryParams, LogTypes } from "types/task";
-import { queryString } from "utils";
-
-const { parseQueryString } = queryString;
 
 type LogViewer = "raw" | "html" | "parsley" | "lobster";
 type Action =
@@ -61,16 +59,19 @@ type Action =
   | { name: "Click Display Task Link" }
   | { name: "Click Project Link" }
   | { name: "Click See History Button" }
+  | {
+      name: "Click Task File Link";
+      parsleyAvailable: boolean;
+      fileName: string;
+    }
   | { name: "Click Trace Link" }
   | { name: "Click Trace Metrics Link" }
   | { name: "Submit Previous Commit Selector"; type: CommitType };
 
 export const useTaskAnalytics = () => {
   const { id } = useParams<{ id: string }>();
-  const location = useLocation();
 
-  const parsed = parseQueryString(location.search);
-  const execution = Number(parsed[RequiredQueryParams.Execution]);
+  const [execution] = useQueryParam(RequiredQueryParams.Execution, 0);
   const { data: eventData } = useQuery<TaskQuery, TaskQueryVariables>(TASK, {
     variables: { taskId: id, execution },
     fetchPolicy: "cache-first",

src/pages/task/taskTabs/FileTable/GroupedFileTable/index.tsx

@@ -1,7 +1,8 @@
-import { useRef } from "react";
+import { useMemo, useRef } from "react";
 import styled from "@emotion/styled";
 import { useLeafyGreenTable, LGColumnDef } from "@leafygreen-ui/table/new";
 import { Subtitle } from "@leafygreen-ui/typography";
+import { useTaskAnalytics } from "analytics";
 import { StyledLink } from "components/styles";
 import { BaseTable } from "components/Table/BaseTable";
 import { size } from "constants/tokens";
@@ -10,7 +11,9 @@ import { GroupedFiles } from "../types";
 
 type GroupedFilesFile = Unpacked<GroupedFiles["files"]>;
 
-const columns: LGColumnDef<GroupedFilesFile>[] = [
+const columns = (
+  taskAnalytics: ReturnType<typeof useTaskAnalytics>
+): LGColumnDef<GroupedFilesFile>[] => [
   {
     accessorKey: "name",
     header: "Name",
@@ -21,6 +24,13 @@ const columns: LGColumnDef<GroupedFilesFile>[] = [
         href={value.row.original.link}
         data-cy="file-link"
         target="_blank"
+        onClick={() => {
+          taskAnalytics.sendEvent({
+            name: "Click Task File Link",
+            parsleyAvailable: false,
+            fileName: value.getValue() as GroupedFilesFile["name"],
+          });
+        }}
       >
         {value.getValue()}
       </StyledLink>
@@ -37,11 +47,16 @@ const GroupedFileTable: React.FC<GroupedFileTableProps> = ({
   taskName,
 }) => {
   const tableContainerRef = useRef<HTMLDivElement>(null);
+  const taskAnalytics = useTaskAnalytics();
 
+  const memoizedColumns = useMemo(
+    () => columns(taskAnalytics),
+    [taskAnalytics]
+  );
   const table = useLeafyGreenTable<GroupedFilesFile>({
     containerRef: tableContainerRef,
     data: files,
-    columns,
+    columns: memoizedColumns,
   });
 
   return (