13674095608

Committed 05 Mar 2025 10:40AM UTC coverage: 48.52% (+0.05%) from 48.473%

Build Type

push

github

Committed by Hang Le

Commit Message

Move DataGrid pagination to DataTable (merge commit)

Merge branch 'bugfix/main-table-sorting-entire-table' into 'main'
* remove unnecessary pageSizeOption from DataTable

* fix indentation typo in Datatable

* fix resetting pagination by new key for rerendering

* move pagination of folder and files to be handled by DataTable.tsx

* remove custom paging details from home submissions table

* move DataGrid pagination to DataTable

Closes #983
See merge request https://gitlab.ci.csc.fi/sds-dev/sd-submit/metadata-submitter-frontend/-/merge_requests/1054

Approved-by: Hang Le <lhang@csc.fi>
Co-authored-by: Liisa Lado-Villar <145-lilado@users.noreply.gitlab.ci.csc.fi>
Merged by Hang Le <lhang@csc.fi>

Run Details

653 of 951 branches covered (68.66%)

Branch coverage included in aggregate %.

9 of 21 new or added lines in 4 files covered. (42.86%)

4 existing lines in 4 files now uncovered.

6082 of 12930 relevant lines covered (47.04%)

3.89 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

11.11

/src/components/SubmissionWizard/WizardComponents/WizardFilesTable.tsx

﻿import React, { useState } from "react"

import FolderIcon from "@mui/icons-material/Folder"
import Box from "@mui/material/Box"
import Typography from "@mui/material/Typography"
import { GridColDef } from "@mui/x-data-grid"
import type { GridSortDirection } from "@mui/x-data-grid"
import { uniqBy, upperFirst } from "lodash"
import { useTranslation } from "react-i18next"

import DataTable from "components/DataTable"
import type { DataFileRow, File } from "types"
import { isFile } from "utils"

type FilesTableProps = {
  currentFilePath: string
  files: File[]
  handleClickFileRow: (path: string, name: string) => void
}

const FilesTable: React.FC<FilesTableProps> = props => {
  const { currentFilePath, files, handleClickFileRow } = props
  const { t } = useTranslation()

  const [page, setPage] = useState<number>(0)

  const sortingModel = [
    {
      field: "name",
      sort: "asc" as GridSortDirection,
    },
  ]

  const columns: GridColDef[] = [
    {
      field: "name",
      headerName: t("dataTable.name"),
      sortable: true,
      renderCell: params => {
        return (
          <Box
            display="flex"
            alignItems="center"
            height="100%"
            onClick={() => handleClickFileRow(params.row.id, params.row.name)}
          >
            {!isFile(files, params.row.id) && (
              <FolderIcon color="primary" fontSize="medium" sx={{ mr: "0.5rem" }} />
            )}
            <Typography component="span">{upperFirst(params.row.name)}</Typography>
          </Box>
        )
      },
    },
    {
      field: "size",
      headerName: t("dataTable.size"),
      type: "number",
      sortable: true, // TODO: need to convert sizes to humanreadable bytes
    },
    {
      field: "lastModified",
      headerName: t("dataTable.lastModified"),
      sortable: true, // TODO when backend is ready
    },
  ]

  const getDisplayingFiles = () => {
    const displayingFiles = currentFilePath
      ? files
          .filter(file => file.path.includes(currentFilePath))
          .map(file => {
            let newName = ""
            let newPath = ""
            if (file.path.length > currentFilePath.length) {
              newName = file.path.split(currentFilePath)[1].split("/")[1]
              newPath = `${currentFilePath}/${newName}`
            } else {
              newName = file.name
              newPath = file.path
            }
            return { ...file, path: newPath, name: newName }
          })
      : files
    return uniqBy(displayingFiles, "path")
  }

  const getRows = (): DataFileRow[] => {
    const displayingFiles = getDisplayingFiles()
    return displayingFiles
      .map(file => {
        return {
          id: file.path,
          name: file.name,
          size: file.bytes,
          lastModified: "",
        }
      })
  }

  const fetchPageOnChange = (page: number) => {
    setPage(page)
  }

  return (
    <DataTable
      rows={getRows()}
      columns={columns}
      page={page}
      sortingModel={sortingModel}
      totalItems={getDisplayingFiles().length}
      fetchPageOnChange={fetchPageOnChange}
    />
  )
}

export default FilesTable

1	import React, { useState } from "react"	1✔
2
3	import FolderIcon from "@mui/icons-material/Folder"	1✔
4	import Box from "@mui/material/Box"	1✔
5	import Typography from "@mui/material/Typography"	1✔
6	import { GridColDef } from "@mui/x-data-grid"
7	import type { GridSortDirection } from "@mui/x-data-grid"
8	import { uniqBy, upperFirst } from "lodash"	1✔
9	import { useTranslation } from "react-i18next"	1✔
10
11	import DataTable from "components/DataTable"	1✔
12	import type { DataFileRow, File } from "types"
13	import { isFile } from "utils"	1✔
14
15	type FilesTableProps = {
16	currentFilePath: string
17	files: File[]
18	handleClickFileRow: (path: string, name: string) => void
19	}
20
21	const FilesTable: React.FC<FilesTableProps> = props => {	1✔
22	const { currentFilePath, files, handleClickFileRow } = props	×
23	const { t } = useTranslation()	×
24
25	const [page, setPage] = useState<number>(0)	×
26
UNCOV 27	const sortingModel = [	×
28	{	×
29	field: "name",	×
30	sort: "asc" as GridSortDirection,	×
31	},	×
32	]
33
34	const columns: GridColDef[] = [	×
35	{	×
36	field: "name",	×
37	headerName: t("dataTable.name"),	×
38	sortable: true,	×
39	renderCell: params => {	×
40	return (	×
41	<Box	×
42	display="flex"	×
43	alignItems="center"	×
44	height="100%"	×
45	onClick={() => handleClickFileRow(params.row.id, params.row.name)}	×
46	>
47	{!isFile(files, params.row.id) && (	×
48	<FolderIcon color="primary" fontSize="medium" sx={{ mr: "0.5rem" }} />	×
49	)}
50	<Typography component="span">{upperFirst(params.row.name)}</Typography>	×
51	</Box>	×
52	)
53	},	×
54	},	×
55	{	×
56	field: "size",	×
57	headerName: t("dataTable.size"),	×
58	type: "number",	×
59	sortable: true, // TODO: need to convert sizes to humanreadable bytes	×
60	},	×
61	{	×
62	field: "lastModified",	×
63	headerName: t("dataTable.lastModified"),	×
64	sortable: true, // TODO when backend is ready	×
65	},	×
66	]
67
68	const getDisplayingFiles = () => {	×
69	const displayingFiles = currentFilePath	×
70	? files	×
71	.filter(file => file.path.includes(currentFilePath))	×
72	.map(file => {	×
73	let newName = ""	×
74	let newPath = ""	×
75	if (file.path.length > currentFilePath.length) {	×
76	newName = file.path.split(currentFilePath)[1].split("/")[1]	×
77	newPath = `${currentFilePath}/${newName}`	×
78	} else {	×
79	newName = file.name	×
80	newPath = file.path	×
81	}	×
82	return { ...file, path: newPath, name: newName }	×
83	})	×
84	: files	×
85	return uniqBy(displayingFiles, "path")	×
86	}	×
87
88	const getRows = (): DataFileRow[] => {	×
89	const displayingFiles = getDisplayingFiles()	×
90	return displayingFiles	×
91	.map(file => {	×
92	return {	×
93	id: file.path,	×
94	name: file.name,	×
95	size: file.bytes,	×
96	lastModified: "",	×
97	}	×
98	})	×
99	}	×
100
101	const fetchPageOnChange = (page: number) => {	×
102	setPage(page)	×
103	}	×
104
105	return (	×
106	<DataTable	×
107	rows={getRows()}	×
108	columns={columns}	×
109	page={page}	×
110	sortingModel={sortingModel}	×
111	totalItems={getDisplayingFiles().length}	×
112	fetchPageOnChange={fetchPageOnChange}	×
113	/>
114	)
115	}	×
116
117	export default FilesTable	1✔

CSCfi / metadata-submitter-frontend / 13674095608

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous