diff --git a/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.tsx b/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.tsx index 7f0db9fa1..94e008bce 100644 --- a/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.tsx +++ b/apps/spruce/src/pages/version/taskDuration/TaskDurationTable.tsx @@ -6,6 +6,8 @@ import { SortingState, getFacetedMinMaxValues, useLeafyGreenTable, + LGColumnDef, + LeafyGreenTable, } from "@leafygreen-ui/table"; import { useParams } from "react-router-dom"; import { useVersionAnalytics } from "analytics"; @@ -19,13 +21,17 @@ import { VersionTaskDurationsQuery, SortDirection } from "gql/generated/types"; import { useTaskStatuses } from "hooks"; import { useQueryParams } from "hooks/useQueryParam"; import { PatchTasksQueryParams } from "types/task"; +import { Unpacked } from "types/utils"; import { TaskDurationCell } from "./TaskDurationCell"; const { getDefaultOptions: getDefaultFiltering } = ColumnFiltering; const { getDefaultOptions: getDefaultSorting } = RowSorting; +type TaskDurationData = Unpacked< + VersionTaskDurationsQuery["version"]["tasks"]["data"] +>; interface Props { - tasks: VersionTaskDurationsQuery["version"]["tasks"]["data"]; + tasks: TaskDurationData[]; loading: boolean; numLoadingRows: number; } @@ -48,7 +54,6 @@ export const TaskDurationTable: React.FC = ({ [], // eslint-disable-line react-hooks/exhaustive-deps ); - // @ts-expect-error: FIXME. This comment was added by an automated script. const setFilters = (f: ColumnFiltersState) => // @ts-expect-error: FIXME. This comment was added by an automated script. getDefaultFiltering(table).onColumnFiltersChange(f); @@ -93,7 +98,7 @@ export const TaskDurationTable: React.FC = ({ setQueryParams(updatedParams); }; - const columns = useMemo( + const columns: LGColumnDef[] = useMemo( () => [ { id: PatchTasksQueryParams.TaskName, @@ -102,13 +107,17 @@ export const TaskDurationTable: React.FC = ({ size: 250, enableColumnFilter: true, cell: ({ - // @ts-expect-error: FIXME. This comment was added by an automated script. getValue, row: { - // @ts-expect-error: FIXME. This comment was added by an automated script. - original: { id }, + original: { execution, id }, }, - }) => , + }) => ( + + ), meta: { search: { "data-cy": "task-name-filter-popover", @@ -150,19 +159,16 @@ export const TaskDurationTable: React.FC = ({ enableSorting: true, size: 250, cell: ({ - // @ts-expect-error: FIXME. This comment was added by an automated script. column, - // @ts-expect-error: FIXME. This comment was added by an automated script. getValue, row: { - // @ts-expect-error: FIXME. This comment was added by an automated script. original: { status }, }, }) => ( ), }, @@ -171,44 +177,42 @@ export const TaskDurationTable: React.FC = ({ ); const tableContainerRef = useRef(null); - // @ts-expect-error: FIXME. This comment was added by an automated script. - const table = useLeafyGreenTable< - VersionTaskDurationsQuery["version"]["tasks"]["data"][0] - >({ - columns, - containerRef: tableContainerRef, - // @ts-expect-error: FIXME. This comment was added by an automated script. - data: tasks ?? [], - defaultColumn: { - // Handle bug in sorting order - // https://github.com/TanStack/table/issues/4289 - sortDescFirst: false, - }, - getFacetedMinMaxValues: getFacetedMinMaxValues(), - initialState: { - columnFilters: initialFilters, - sorting: initialSort, - }, - manualFiltering: true, - manualPagination: true, - manualSorting: true, - onColumnFiltersChange: onChangeHandler( + const table: LeafyGreenTable = + useLeafyGreenTable({ + columns, + containerRef: tableContainerRef, // @ts-expect-error: FIXME. This comment was added by an automated script. - setFilters, - (updatedState) => { - updateFilters(updatedState); - table.resetRowSelection(); + data: tasks ?? [], + defaultColumn: { + // Handle bug in sorting order + // https://github.com/TanStack/table/issues/4289 + sortDescFirst: false, }, - ), - onSortingChange: onChangeHandler( - // @ts-expect-error: FIXME. This comment was added by an automated script. - setSorting, - (updatedState) => { - updateSort(updatedState); - table.resetRowSelection(); + getFacetedMinMaxValues: getFacetedMinMaxValues(), + initialState: { + columnFilters: initialFilters, + sorting: initialSort, }, - ), - }); + manualFiltering: true, + manualPagination: true, + manualSorting: true, + onColumnFiltersChange: onChangeHandler( + // @ts-expect-error: FIXME. This comment was added by an automated script. + setFilters, + (updatedState) => { + updateFilters(updatedState); + table.resetRowSelection(); + }, + ), + onSortingChange: onChangeHandler( + // @ts-expect-error: FIXME. This comment was added by an automated script. + setSorting, + (updatedState) => { + updateSort(updatedState); + table.resetRowSelection(); + }, + ), + }); return (