diff --git a/src/pages/RepoPage/CoverageTab/subroute/FileExplorer/CodeTreeTable/CodeTreeTable.jsx b/src/pages/RepoPage/CoverageTab/subroute/FileExplorer/CodeTreeTable/CodeTreeTable.jsx
deleted file mode 100644
index 92c69cd796..0000000000
--- a/src/pages/RepoPage/CoverageTab/subroute/FileExplorer/CodeTreeTable/CodeTreeTable.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import Table from 'old_ui/Table'
-
-import { useRepoBranchContentsTable } from '../hooks'
-import { Loader, RepoContentsResult } from '../shared'
-
-function CodeTreeTable() {
- const {
- data,
- headers,
- handleSort,
- isSearching,
- isMissingHeadReport,
- isLoading,
- hasFlagsSelected,
- hasComponentsSelected,
- pathContentsType,
- } = useRepoBranchContentsTable()
-
- if (pathContentsType === 'UnknownPath') {
- return (
-
- Unknown filepath. Please ensure that files/directories exist and are not
- empty.
-
- )
- }
-
- if (pathContentsType === 'MissingCoverage') {
- return No coverage data available.
- }
-
- return (
-
-
-
- {data?.length === 0 && !isLoading ? (
-
- ) : null}
-
()
+
+function getOrderingDirection(sorting: Array<{ id: string; desc: boolean }>) {
+ const state = sorting.at(0)
+
+ if (state) {
+ const direction = state?.desc
+ ? OrderingDirection.DESC
+ : OrderingDirection.ASC
+ let ordering = undefined
+ if (state.id === 'name') {
+ ordering = 'NAME'
+ }
+
+ if (state.id === 'percentCovered') {
+ ordering = 'COVERAGE'
+ }
+
+ if (state.id === 'hits') {
+ ordering = 'HITS'
+ }
+
+ if (state.id === 'misses') {
+ ordering = 'MISSES'
+ }
+
+ if (state.id === 'partials') {
+ ordering = 'PARTIALS'
+ }
+
+ if (state.id === 'lines') {
+ ordering = 'LINES'
+ }
+
+ return { direction, ordering }
+ }
+
+ return undefined
+}
+
+export const getBaseColumns = () => {
+ const baseColumns = [
+ columnHelper.accessor('name', {
+ id: 'name',
+ header: () => 'Files',
+ cell: ({ renderValue }) => renderValue(),
+ }),
+ columnHelper.accessor('lines', {
+ id: 'lines',
+ header: () => 'Tracked lines',
+ cell: ({ renderValue }) => renderValue(),
+ }),
+ columnHelper.accessor('hits', {
+ id: 'hits',
+ header: () => 'Covered',
+ cell: ({ renderValue }) => renderValue(),
+ }),
+ columnHelper.accessor('partials', {
+ id: 'partials',
+ header: () => 'Partial',
+ cell: ({ renderValue }) => renderValue(),
+ }),
+ columnHelper.accessor('misses', {
+ id: 'misses',
+ header: () => 'Missed',
+ cell: ({ renderValue }) => renderValue(),
+ }),
+ columnHelper.accessor('coverage', {
+ id: 'percentCovered',
+ header: () => 'Coverage %',
+ cell: ({ renderValue }) => renderValue(),
+ }),
+ ]
+
+ return baseColumns
+}
+
+function CodeTreeTable() {
+ const [sorting, setSorting] = useState([{ id: 'name', desc: false }])
+ const ordering = useMemo(() => getOrderingDirection(sorting), [sorting])
+ const {
+ data,
+ isSearching,
+ isMissingHeadReport,
+ isLoading,
+ hasFlagsSelected,
+ hasComponentsSelected,
+ pathContentsType,
+ } = useRepoBranchContentsTable(ordering)
+
+ const table = useReactTable({
+ columns: getBaseColumns(),
+ getCoreRowModel: getCoreRowModel(),
+ data: data ?? [],
+ state: {
+ sorting,
+ },
+ onSortingChange: setSorting,
+ manualSorting: true,
+ })
+
+ if (pathContentsType === 'UnknownPath') {
+ return (
+
+ Unknown filepath. Please ensure that files/directories exist and are not
+ empty.
+
+ )
+ }
+
+ if (pathContentsType === 'MissingCoverage') {
+ return No coverage data available.
+ }
+ return (
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => (
+ |
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+
+
+
+ |
+ ))}
+
+ ))}
+
+
+ {isLoading ? (
+
+ |
+
+ |
+
+ ) : (
+ table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+ |
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )}
+ |
+ ))}
+
+ ))
+ )}
+
+
+
+
+ {data?.length === 0 && !isLoading ? (
+
+ ) : null}
+
+
- Unknown filepath. Please ensure that files/directories exist and are not
- empty.
-
- )
- }
-
- if (pathContentsType === 'MissingCoverage') {
- return No coverage data available.
- }
-
- return (
-
-
-
- {data?.length === 0 && !isLoading ? (
-
- ) : null}
-
()
+
+function getOrderingDirection(sorting: Array<{ id: string; desc: boolean }>) {
+ const state = sorting.at(0)
+
+ if (state) {
+ const direction = state?.desc
+ ? OrderingDirection.DESC
+ : OrderingDirection.ASC
+
+ let ordering = undefined
+ if (state.id === 'name') {
+ ordering = 'NAME'
+ }
+
+ if (state.id === 'percentCovered') {
+ ordering = 'COVERAGE'
+ }
+
+ if (state.id === 'hits') {
+ ordering = 'HITS'
+ }
+
+ if (state.id === 'misses') {
+ ordering = 'MISSES'
+ }
+
+ if (state.id === 'partials') {
+ ordering = 'PARTIALS'
+ }
+
+ if (state.id === 'lines') {
+ ordering = 'LINES'
+ }
+
+ return { direction, ordering }
+ }
+
+ return undefined
+}
+
+export const getBaseColumns = () => {
+ const baseColumns = [
+ columnHelper.accessor('name', {
+ id: 'name',
+ header: () => 'Files',
+ cell: ({ renderValue }) => renderValue(),
+ }),
+ columnHelper.accessor('lines', {
+ id: 'lines',
+ header: () => 'Tracked lines',
+ cell: ({ renderValue }) => renderValue(),
+ }),
+ columnHelper.accessor('hits', {
+ id: 'hits',
+ header: () => 'Covered',
+ cell: ({ renderValue }) => renderValue(),
+ }),
+ columnHelper.accessor('partials', {
+ id: 'partials',
+ header: () => 'Partial',
+ cell: ({ renderValue }) => renderValue(),
+ }),
+ columnHelper.accessor('misses', {
+ id: 'misses',
+ header: () => 'Missed',
+ cell: ({ renderValue }) => renderValue(),
+ }),
+ columnHelper.accessor('coverage', {
+ id: 'percentCovered',
+ header: () => 'Coverage %',
+ cell: ({ renderValue }) => renderValue(),
+ }),
+ ]
+
+ return baseColumns
+}
+
+function FileListTable() {
+ const [sorting, setSorting] = useState([{ id: 'misses', desc: true }])
+ const ordering = useMemo(() => getOrderingDirection(sorting), [sorting])
+ const {
+ data,
+ isSearching,
+ isMissingHeadReport,
+ isLoading,
+ hasFlagsSelected,
+ hasComponentsSelected,
+ pathContentsType,
+ } = useRepoBranchContentsTable(ordering)
+ const table = useReactTable({
+ columns: getBaseColumns(),
+ getCoreRowModel: getCoreRowModel(),
+ data: data ?? [],
+ state: {
+ sorting,
+ },
+ onSortingChange: setSorting,
+ manualSorting: true,
+ })
+
+ if (pathContentsType === 'UnknownPath') {
+ return (
+
+ Unknown filepath. Please ensure that files/directories exist and are not
+ empty.
+
+ )
+ }
+
+ if (pathContentsType === 'MissingCoverage') {
+ return No coverage data available.
+ }
+ return (
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => (
+ |
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+
+
+
+ |
+ ))}
+
+ ))}
+
+
+ {isLoading ? (
+
+ |
+
+ |
+
+ ) : (
+ table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+ |
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )}
+ |
+ ))}
+
+ ))
+ )}
+
+
+
+
+ {data?.length === 0 && !isLoading ? (
+
+ ) : null}
+