diff --git a/src/analytics/task/useTaskAnalytics.ts b/src/analytics/task/useTaskAnalytics.ts index 0fd4867cdb..19d1651cea 100644 --- a/src/analytics/task/useTaskAnalytics.ts +++ b/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 }>(); diff --git a/src/pages/task/taskTabs/FileTable/GroupedFileTable/index.tsx b/src/pages/task/taskTabs/FileTable/GroupedFileTable/index.tsx index f747a33e92..bc1e657a33 100644 --- a/src/pages/task/taskTabs/FileTable/GroupedFileTable/index.tsx +++ b/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; -const columns: LGColumnDef[] = [ +// taskAnalytics is the return value of useTaskAnalytics +const columns = ( + taskAnalytics: ReturnType +): LGColumnDef[] => [ { accessorKey: "name", header: "Name", @@ -21,6 +25,13 @@ const columns: LGColumnDef[] = [ 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()} @@ -37,11 +48,16 @@ const GroupedFileTable: React.FC = ({ taskName, }) => { const tableContainerRef = useRef(null); + const taskAnalytics = useTaskAnalytics(); + const memoizedColumns = useMemo( + () => columns(taskAnalytics), + [taskAnalytics] + ); const table = useLeafyGreenTable({ containerRef: tableContainerRef, data: files, - columns, + columns: memoizedColumns, }); return (