Track analytics for task file link clicks

src/analytics/task/useTaskAnalytics.ts

@@ -63,7 +63,12 @@ type Action =
   | { name: "Click See History Button" }
   | { name: "Click Trace Link" }
   | { name: "Click Trace Metrics Link" }
-  | { name: "Submit Previous Commit Selector"; type: CommitType };
+  | { name: "Submit Previous Commit Selector"; type: CommitType }
+  | {
+      name: "Click Task File Link";
+      parsleyAvailable: boolean;
+      fileName: string;
+    };
 
 export const useTaskAnalytics = () => {
   const { id } = useParams<{ id: string }>();

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,10 @@ import { GroupedFiles } from "../types";
 
 type GroupedFilesFile = Unpacked<GroupedFiles["files"]>;
 
-const columns: LGColumnDef<GroupedFilesFile>[] = [
+// taskAnalytics is the return value of useTaskAnalytics
+const columns = (
+  taskAnalytics: ReturnType<typeof useTaskAnalytics>
+): LGColumnDef<GroupedFilesFile>[] => [
   {
     accessorKey: "name",
     header: "Name",
@@ -21,6 +25,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(),
+          });
+        }}
       >
         {value.getValue()}
       </StyledLink>
@@ -37,11 +48,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 (