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

12.82

/src/components/SubmissionWizard/WizardComponents/WizardDataFolderTable.tsx

import React, { useState, useEffect } from "react"

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

import { files } from "../../../../playwright/fixtures/files_response" // MOCK files array

import DataTable from "components/DataTable"
import { ResponseStatus } from "constants/responseStatus"
import { updateStatus } from "features/statusMessageSlice"
import { useAppSelector, useAppDispatch } from "hooks"
import filesAPIService from "services/filesAPI"
import type { DataFolderRow } from "types"

type DataFolderTableProps = {
  selectedFolder: string
  linkedFolder: string
  handleFolderChange: (e: React.ChangeEvent<HTMLInputElement>) => void
  handleFilesView: (folderName: string) => void
}

const WizardDataFolderTable: React.FC<DataFolderTableProps> = props => {
  const { selectedFolder, linkedFolder, handleFolderChange, handleFilesView } = props
  const projectId = useAppSelector(state => state.projectId)
  const dispatch = useAppDispatch()

  const { t } = useTranslation()

  const columns: GridColDef[] = [
    {
      field: "name",
      headerName: t("dataTable.name"),
      sortable: true,
      renderCell: params => {
        return (
          <Box display="flex" alignItems="center" height="100%">
            {!linkedFolder && (
              <Radio
                checked={selectedFolder === params.row.name}
                onChange={handleFolderChange}
                value={params.row.name}
                name="radio-buttons"
                inputProps={{ "aria-label": params.row.name }}
              />
            )}
            <FolderIcon
              color="primary"
              fontSize="medium"
              sx={{ ml: "1rem", mr: "0.5rem" }}
              onClick={() => handleFilesView(params.row.name)}
            />
            <Typography component="span" onClick={() => handleFilesView(params.row.name)}>
              {upperFirst(params.row.name)}
            </Typography>
          </Box>
        )
      },
    },
    {
      field: "items",
      headerName: t("dataTable.totalItems"),
      type: "number",
    },
    {
      field: "size",
      headerName: t("dataTable.size"),
      sortable: true, // TODO: need to convert sizes to humanreadable bytes
    },
  ]

  useEffect(() => {
    let isMounted = true
    const getFiles = async () => {
      if (isMounted) {
        try {
          const response = await filesAPIService.getProjectFiles(projectId)
          const files = response.data
          sessionStorage.setItem("files", JSON.stringify(files))
          // TODO: consider saving files in redux instead of sessionStorage if needed
        } catch (error) {
          dispatch(
            updateStatus({
              status: ResponseStatus.error,
              response: error,
              helperText: "",
            })
          )
        }
      }
    }
    getFiles()
    return () => {
      isMounted = false
    }
  }, [])

  useEffect(() => {
    !linkedFolder ? setTotalItems(getFolderNames().length) : setTotalItems(1)
  }, [linkedFolder])

  const getRows = (): DataFolderRow[] => {
    const folderNames = getFolderNames()
    return folderNames
      .filter(folderName => (!!linkedFolder ? folderName === linkedFolder : folderName))
        .map(folderName => {
        const currentFiles = files.filter(file => file.path.includes(`/${folderName}/`))
        const totalSize = currentFiles.reduce((acc, currentFile) => acc + currentFile["bytes"], 0)
        return {
          id: folderName,
          name: folderName,
          size: totalSize,
          items: currentFiles.length,
        }
      })
  }

  const getFolderNames = () => [...new Set(files.map(file => file["path"].split("/")[1]))]

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

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

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

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

export default WizardDataFolderTable

1	import React, { useState, useEffect } from "react"	1✔
2
3	import FolderIcon from "@mui/icons-material/Folder"	1✔
4	import Box from "@mui/material/Box"	1✔
5	import Radio from "@mui/material/Radio"	1✔
6	import Typography from "@mui/material/Typography"	1✔
7	import { GridColDef } from "@mui/x-data-grid"
8	import type { GridSortDirection } from "@mui/x-data-grid"
9	import { upperFirst } from "lodash"	1✔
10	import { useTranslation } from "react-i18next"	1✔
11
12	import { files } from "../../../../playwright/fixtures/files_response" // MOCK files array	1✔
13
14	import DataTable from "components/DataTable"	1✔
15	import { ResponseStatus } from "constants/responseStatus"	1✔
16	import { updateStatus } from "features/statusMessageSlice"	1✔
17	import { useAppSelector, useAppDispatch } from "hooks"	1✔
18	import filesAPIService from "services/filesAPI"	1✔
19	import type { DataFolderRow } from "types"
20
21	type DataFolderTableProps = {
22	selectedFolder: string
23	linkedFolder: string
24	handleFolderChange: (e: React.ChangeEvent<HTMLInputElement>) => void
25	handleFilesView: (folderName: string) => void
26	}
27
28	const WizardDataFolderTable: React.FC<DataFolderTableProps> = props => {	1✔
29	const { selectedFolder, linkedFolder, handleFolderChange, handleFilesView } = props	×
30	const projectId = useAppSelector(state => state.projectId)	×
31	const dispatch = useAppDispatch()	×
32
33	const { t } = useTranslation()	×
34
35	const columns: GridColDef[] = [	×
36	{	×
37	field: "name",	×
38	headerName: t("dataTable.name"),	×
39	sortable: true,	×
40	renderCell: params => {	×
41	return (	×
42	<Box display="flex" alignItems="center" height="100%">	×
43	{!linkedFolder && (	×
44	<Radio	×
45	checked={selectedFolder === params.row.name}	×
46	onChange={handleFolderChange}	×
47	value={params.row.name}	×
48	name="radio-buttons"	×
49	inputProps={{ "aria-label": params.row.name }}	×
50	/>
51	)}
52	<FolderIcon	×
53	color="primary"	×
54	fontSize="medium"	×
55	sx={{ ml: "1rem", mr: "0.5rem" }}	×
56	onClick={() => handleFilesView(params.row.name)}	×
57	/>
58	<Typography component="span" onClick={() => handleFilesView(params.row.name)}>	×
59	{upperFirst(params.row.name)}	×
60	</Typography>	×
61	</Box>	×
62	)
63	},	×
64	},	×
65	{	×
66	field: "items",	×
67	headerName: t("dataTable.totalItems"),	×
68	type: "number",	×
69	},	×
70	{	×
71	field: "size",	×
72	headerName: t("dataTable.size"),	×
73	sortable: true, // TODO: need to convert sizes to humanreadable bytes	×
74	},	×
75	]
76
77	useEffect(() => {	×
78	let isMounted = true	×
79	const getFiles = async () => {	×
80	if (isMounted) {	×
81	try {	×
82	const response = await filesAPIService.getProjectFiles(projectId)	×
83	const files = response.data	×
84	sessionStorage.setItem("files", JSON.stringify(files))	×
85	// TODO: consider saving files in redux instead of sessionStorage if needed
86	} catch (error) {	×
87	dispatch(	×
88	updateStatus({	×
89	status: ResponseStatus.error,	×
90	response: error,	×
91	helperText: "",	×
92	})	×
93	)	×
94	}	×
95	}	×
96	}	×
97	getFiles()	×
98	return () => {	×
99	isMounted = false	×
100	}	×
101	}, [])	×
102
103	useEffect(() => {	×
104	!linkedFolder ? setTotalItems(getFolderNames().length) : setTotalItems(1)	×
105	}, [linkedFolder])	×
106
107	const getRows = (): DataFolderRow[] => {	×
108	const folderNames = getFolderNames()	×
109	return folderNames	×
110	.filter(folderName => (!!linkedFolder ? folderName === linkedFolder : folderName))	×
NEW 111	.map(folderName => {	×
112	const currentFiles = files.filter(file => file.path.includes(`/${folderName}/`))	×
113	const totalSize = currentFiles.reduce((acc, currentFile) => acc + currentFile["bytes"], 0)	×
114	return {	×
115	id: folderName,	×
116	name: folderName,	×
117	size: totalSize,	×
118	items: currentFiles.length,	×
119	}	×
120	})	×
121	}	×
122
123	const getFolderNames = () => [...new Set(files.map(file => file["path"].split("/")[1]))]	×
124
125	const sortingModel = [	×
126	{	×
127	field: "name",	×
128	sort: "asc" as GridSortDirection,	×
129	},	×
130	]
131
132	const [page, setPage] = useState<number>(0)	×
133	const [totalItems, setTotalItems] = useState<number>(0)	×
134
UNCOV 135	const fetchPageOnChange = (page: number) => {	×
136	setPage(page)	×
137	}	×
138
139	return (	×
140	<DataTable	×
141	rows={getRows()}	×
142	columns={columns}	×
143	page={page}	×
144	sortingModel={sortingModel}	×
145	totalItems={totalItems}	×
146	fetchPageOnChange={fetchPageOnChange}	×
147	/>
148	)
149	}	×
150
151	export default WizardDataFolderTable	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