• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

CSCfi / metadata-submitter-frontend / 15271191055

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

push

github

Hang Le
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>

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
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✔
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc