15271191055

Committed 27 May 2025 09:05AM UTC coverage: 57.382% (+0.1%) from 57.253%

Build # 15271191055

Build Type

push

github

Committed by Hang Le

Commit Message

Update React to version 19 (merge commit)

Merge branch 'feature/upgrade-react-v19' into 'main'
* Fix styles and Home view's filter error

* Update React to version 19

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

Approved-by: Monika Radaviciute <mradavic@csc.fi>
Merged by Hang Le <lhang@csc.fi>

Run Details

645 of 927 branches covered (69.58%)

Branch coverage included in aggregate %.

78 of 107 new or added lines in 19 files covered. (72.9%)

4 existing lines in 2 files now uncovered.

6149 of 10913 relevant lines covered (56.35%)

4.81 hits per line

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

12.42

/src/components/SubmissionWizard/WizardComponents/WizardPagination.tsx

import React, { ReactElement } from "react"

import ExpandMore from "@mui/icons-material/ExpandMore"
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft"
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight"
import IconButton from "@mui/material/IconButton"
import MuiPagination from "@mui/material/Pagination"
import { styled, useTheme } from "@mui/material/styles"
import Table from "@mui/material/Table"
import TableFooter from "@mui/material/TableFooter"
import MuiTablePagination from "@mui/material/TablePagination"
import TableRow from "@mui/material/TableRow"
import useMediaQuery from "@mui/material/useMediaQuery"
import { useTranslation } from "react-i18next"

const TablePagination = styled(MuiTablePagination)(({ theme }) => ({
  color: theme.palette.secondary.main,
  border: "none",
  borderTop: `1px solid ${theme.palette.secondary.light}`,
  "& .MuiTablePagination-spacer": {
    flex: "none",
  },
  "& .MuiTablePagination-toolbar": {
    display: "flex",
    padding: 0,
    flexWrap: "wrap",
    justifyContent: "space-between",
  },
  "& .MuiTablePagination-selectLabel": {
    marginLeft: "1.375em",
  },
  "& .MuiTablePagination-selectIcon": {
    fontSize: "2rem",
  },
  "& .MuiTablePagination-displayedRows": {
    marginLeft: "auto",
    "@media (max-width: 600px)": {
      marginLeft: 0,
      width: "100%",
      textAlign: "center",
    },
  },
}))

const TablePaginationActions = styled("div")(({ theme }) => ({
  marginLeft: "auto",
  width: "auto",
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  justifyContent: "center",
  "& > span:first-of-type": {
    textAlign: "center",
  },
  "& nav": {
    marginLeft: "3.25rem",
    "& li": {
      margin: "0 0.5rem",
    },
    "& li:first-of-type, li:last-of-type": {
      margin: 0,
    },
  },
  "& .MuiPaginationItem-root": {
    color: theme.palette.primary.main,
    border: "none",
    display: "grid",
    alignItems: "center",
    "&.MuiPaginationItem-previousNext": {
      color: theme.palette.primary.main,
      "& > svg": {
        fontSize: "x-large",
      },
      "&.Mui-disabled": {
        color: theme.palette.secondary.light,
        opacity: 1,
      },
    },
  },
  "& .MuiPaginationItem-root.Mui-selected": {
    color: theme.palette.common.white,
    backgroundColor: theme.palette.primary.main,
  },
}))

type WizardPaginationActionsType = {
  count: number
  page: number
  rowsPerPage: number
  onPageChange: (event: null, newPage: number) => void
}

const WizardPaginationActions = ({
  count,
  page,
  rowsPerPage,
  onPageChange,
}: WizardPaginationActionsType): ReactElement<unknown> => {
  const theme = useTheme()
  const totalPages = Math.ceil(count / rowsPerPage)

  const matches = useMediaQuery(theme.breakpoints.down("md"))

  const handleBackButtonClick = () => {
    onPageChange(null, page - 1)
  }
  const handleNextButtonClick = () => {
    onPageChange(null, page + 1)
  }
  const handleChange = (e: React.ChangeEvent<unknown>, val: number) => {
    onPageChange(null, val - 1)
  }

  return (
    <TablePaginationActions>
      {matches ? (
        <>
          <IconButton
            onClick={handleBackButtonClick}
            disabled={page === 0}
            aria-label="previous page"
            data-testid="previous page"
          >
            {theme.direction === "rtl" ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
          </IconButton>
          <IconButton
            onClick={handleNextButtonClick}
            disabled={page + 1 === totalPages} // Disable when on the last page
            aria-label="next page"
            data-testid="next page"
          >
            {theme.direction === "rtl" ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
          </IconButton>
        </>
      ) : (
        <MuiPagination count={totalPages} page={page + 1} onChange={handleChange} />
      )}
    </TablePaginationActions>
  )
}

type WizardPaginationProps = {
  totalNumberOfItems: number
  page: number
  itemsPerPage: number
  handleChangePage: (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null,
    page: number
  ) => void
  handleItemsPerPageChange: (
    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => void
}

// Pagination Component
const WizardPagination: React.FC<WizardPaginationProps> = props => {
  const { totalNumberOfItems, page, itemsPerPage, handleChangePage, handleItemsPerPageChange } =
    props
  const { t } = useTranslation()

  const labelDisplayedRows = ({ from, to, count }: { from: number; to: number; count: number }) => {
    const narrowFrom = from
    const narrowTo = to > count ? count : to

    return (
      <span>
        {narrowFrom}-{narrowTo} / {count} {count > 1 ? t("dataTable.items") : t("dataTable.item")}
      </span>
    )
  }

  // Get "rowsPerPageOptions" of TablePagination
  const getRowsPerPageOptions = (
    totalItems?: number
  ): Array<number | { value: number; label: string }> => {
    if (totalItems) {
      return [5, 10, 25, 50, 100]
    }
    return []
  }

  return (
    <Table data-testid="table-pagination">
      <TableFooter>
        <TableRow>
          <TablePagination
            ActionsComponent={WizardPaginationActions}
            count={totalNumberOfItems}
            labelRowsPerPage={t("dataTable.itemsPerPage")}
            labelDisplayedRows={labelDisplayedRows}
            page={page}
            rowsPerPage={itemsPerPage}
            rowsPerPageOptions={getRowsPerPageOptions(totalNumberOfItems)}
            SelectProps={{ IconComponent: ExpandMore }}
            onPageChange={handleChangePage}
            onRowsPerPageChange={handleItemsPerPageChange}
          />
        </TableRow>
      </TableFooter>
    </Table>
  )
}

export default WizardPagination

1	import React, { ReactElement } from "react"	1✔
2
3	import ExpandMore from "@mui/icons-material/ExpandMore"	1✔
4	import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft"	1✔
5	import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight"	1✔
6	import IconButton from "@mui/material/IconButton"	1✔
7	import MuiPagination from "@mui/material/Pagination"	1✔
8	import { styled, useTheme } from "@mui/material/styles"	1✔
9	import Table from "@mui/material/Table"	1✔
10	import TableFooter from "@mui/material/TableFooter"	1✔
11	import MuiTablePagination from "@mui/material/TablePagination"	1✔
12	import TableRow from "@mui/material/TableRow"	1✔
13	import useMediaQuery from "@mui/material/useMediaQuery"	1✔
14	import { useTranslation } from "react-i18next"	1✔
15
16	const TablePagination = styled(MuiTablePagination)(({ theme }) => ({	1✔
17	color: theme.palette.secondary.main,	×
18	border: "none",	×
19	borderTop: `1px solid ${theme.palette.secondary.light}`,	×
20	"& .MuiTablePagination-spacer": {	×
21	flex: "none",	×
22	},	×
23	"& .MuiTablePagination-toolbar": {	×
24	display: "flex",	×
25	padding: 0,	×
26	flexWrap: "wrap",	×
27	justifyContent: "space-between",	×
28	},	×
29	"& .MuiTablePagination-selectLabel": {	×
30	marginLeft: "1.375em",	×
31	},	×
32	"& .MuiTablePagination-selectIcon": {	×
33	fontSize: "2rem",	×
34	},	×
35	"& .MuiTablePagination-displayedRows": {	×
36	marginLeft: "auto",	×
37	"@media (max-width: 600px)": {	×
38	marginLeft: 0,	×
39	width: "100%",	×
40	textAlign: "center",	×
41	},	×
42	},	×
43	}))	1✔
44
45	const TablePaginationActions = styled("div")(({ theme }) => ({	1✔
46	marginLeft: "auto",	×
47	width: "auto",	×
48	display: "flex",	×
49	flexDirection: "row",	×
50	alignItems: "center",	×
51	justifyContent: "center",	×
52	"& > span:first-of-type": {	×
53	textAlign: "center",	×
54	},	×
55	"& nav": {	×
56	marginLeft: "3.25rem",	×
57	"& li": {	×
58	margin: "0 0.5rem",	×
59	},	×
60	"& li:first-of-type, li:last-of-type": {	×
61	margin: 0,	×
62	},	×
63	},	×
64	"& .MuiPaginationItem-root": {	×
65	color: theme.palette.primary.main,	×
66	border: "none",	×
67	display: "grid",	×
68	alignItems: "center",	×
69	"&.MuiPaginationItem-previousNext": {	×
70	color: theme.palette.primary.main,	×
71	"& > svg": {	×
72	fontSize: "x-large",	×
73	},	×
74	"&.Mui-disabled": {	×
75	color: theme.palette.secondary.light,	×
76	opacity: 1,	×
77	},	×
78	},	×
79	},	×
80	"& .MuiPaginationItem-root.Mui-selected": {	×
81	color: theme.palette.common.white,	×
82	backgroundColor: theme.palette.primary.main,	×
83	},	×
84	}))	1✔
85
86	type WizardPaginationActionsType = {
87	count: number
88	page: number
89	rowsPerPage: number
90	onPageChange: (event: null, newPage: number) => void
91	}
92
93	const WizardPaginationActions = ({	1✔
94	count,	×
95	page,	×
96	rowsPerPage,	×
97	onPageChange,	×
NEW 98	}: WizardPaginationActionsType): ReactElement<unknown> => {	×
99	const theme = useTheme()	×
100	const totalPages = Math.ceil(count / rowsPerPage)	×
101
102	const matches = useMediaQuery(theme.breakpoints.down("md"))	×
103
104	const handleBackButtonClick = () => {	×
105	onPageChange(null, page - 1)	×
106	}	×
107	const handleNextButtonClick = () => {	×
108	onPageChange(null, page + 1)	×
109	}	×
110	const handleChange = (e: React.ChangeEvent<unknown>, val: number) => {	×
111	onPageChange(null, val - 1)	×
112	}	×
113
114	return (	×
115	<TablePaginationActions>	×
116	{matches ? (	×
117	<>	×
118	<IconButton	×
119	onClick={handleBackButtonClick}	×
120	disabled={page === 0}	×
121	aria-label="previous page"	×
122	data-testid="previous page"	×
123	>
124	{theme.direction === "rtl" ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}	×
125	</IconButton>	×
126	<IconButton	×
127	onClick={handleNextButtonClick}	×
128	disabled={page + 1 === totalPages} // Disable when on the last page	×
129	aria-label="next page"	×
130	data-testid="next page"	×
131	>
132	{theme.direction === "rtl" ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}	×
133	</IconButton>	×
134	</>	×
135	) : (
136	<MuiPagination count={totalPages} page={page + 1} onChange={handleChange} />	×
137	)}
138	</TablePaginationActions>	×
139	)
140	}	×
141
142	type WizardPaginationProps = {
143	totalNumberOfItems: number
144	page: number
145	itemsPerPage: number
146	handleChangePage: (
147	event: React.MouseEvent<HTMLButtonElement, MouseEvent> \| null,
148	page: number
149	) => void
150	handleItemsPerPageChange: (
151	event: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>
152	) => void
153	}
154
155	// Pagination Component
156	const WizardPagination: React.FC<WizardPaginationProps> = props => {	1✔
157	const { totalNumberOfItems, page, itemsPerPage, handleChangePage, handleItemsPerPageChange } =	×
158	props	×
159	const { t } = useTranslation()	×
160
161	const labelDisplayedRows = ({ from, to, count }: { from: number; to: number; count: number }) => {	×
162	const narrowFrom = from	×
163	const narrowTo = to > count ? count : to	×
164
165	return (	×
166	<span>	×
167	{narrowFrom}-{narrowTo} / {count} {count > 1 ? t("dataTable.items") : t("dataTable.item")}	×
168	</span>	×
169	)
170	}	×
171
172	// Get "rowsPerPageOptions" of TablePagination
173	const getRowsPerPageOptions = (	×
174	totalItems?: number	×
175	): Array<number \| { value: number; label: string }> => {	×
176	if (totalItems) {	×
177	return [5, 10, 25, 50, 100]	×
178	}	×
179	return []	×
180	}	×
181
182	return (	×
183	<Table data-testid="table-pagination">	×
184	<TableFooter>	×
185	<TableRow>	×
186	<TablePagination	×
187	ActionsComponent={WizardPaginationActions}	×
188	count={totalNumberOfItems}	×
189	labelRowsPerPage={t("dataTable.itemsPerPage")}	×
190	labelDisplayedRows={labelDisplayedRows}	×
191	page={page}	×
192	rowsPerPage={itemsPerPage}	×
193	rowsPerPageOptions={getRowsPerPageOptions(totalNumberOfItems)}	×
194	SelectProps={{ IconComponent: ExpandMore }}	×
195	onPageChange={handleChangePage}	×
196	onRowsPerPageChange={handleItemsPerPageChange}	×
197	/>
198	</TableRow>	×
199	</TableFooter>	×
200	</Table>	×
201	)
202	}	×
203
204	export default WizardPagination	1✔

CSCfi / metadata-submitter-frontend / 15271191055

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