diff --git a/src/analytics/task/useTaskAnalytics.ts b/src/analytics/task/useTaskAnalytics.ts index 0fd4867cdb..81c5e80ae8 100644 --- a/src/analytics/task/useTaskAnalytics.ts +++ b/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(TASK, { variables: { taskId: id, execution }, fetchPolicy: "cache-first", diff --git a/src/pages/task/taskTabs/FileTable/GroupedFileTable/index.tsx b/src/pages/task/taskTabs/FileTable/GroupedFileTable/index.tsx index f747a33e92..cc14e980d0 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,9 @@ import { GroupedFiles } from "../types"; type GroupedFilesFile = Unpacked; -const columns: LGColumnDef[] = [ +const columns = ( + taskAnalytics: ReturnType +): LGColumnDef[] => [ { accessorKey: "name", header: "Name", @@ -21,6 +24,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() as GroupedFilesFile["name"], + }); + }} > {value.getValue()} @@ -37,11 +47,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 (