14967703433

Committed 12 May 2025 08:39AM UTC coverage: 47.757% (-0.03%) from 47.788%

Build Type

push

github

Committed by Hang Le

Commit Message

Changed the distance between icon and text (merge commit)

Merge branch 'feature/table-icon-distance' into 'main'
* Changed the distance between icon and text

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

Approved-by: Hang Le <lhang@csc.fi>
Co-authored-by: Mariia Rogina <roginama@csc.fi>
Merged by Hang Le <lhang@csc.fi>

Run Details

656 of 962 branches covered (68.19%)

Branch coverage included in aggregate %.

14 of 15 new or added lines in 1 file covered. (93.33%)

6 existing lines in 1 file now uncovered.

6297 of 13597 relevant lines covered (46.31%)

4.28 hits per line

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

83.93

/src/components/DataTable.tsx

import React from "react"

import Box from "@mui/material/Box"
import Stack from "@mui/material/Stack"
import { styled } from "@mui/material/styles"
import { DataGrid, GridColDef, GridSortModel } from "@mui/x-data-grid"
import { useTranslation } from "react-i18next"

import WizardPagination from "components/SubmissionWizard/WizardComponents/WizardPagination"
import type { SubmissionRow, DataFolderRow, DataFileRow } from "types"

const Table = styled(DataGrid)(({ theme }) => ({
  color: theme.palette.secondary.main,
  "& .MuiDataGrid-columnSeparator, & .MuiDataGrid-cell:last-of-type": {
    display: "none",
  },
  "& .MuiDataGrid-columnHeaders .MuiDataGrid-columnHeader": {
    backgroundColor: theme.palette.common.white,
    "&:hover": {
      color: theme.palette.primary.main,
      backgroundColor: theme.palette.primary.lighter,
    },
    flex: "1 1 auto",
  },
  "& .MuiDataGrid-columnHeaderTitle": {
    fontWeight: 700,
  },
  "& .MuiDataGrid-columnHeaderTitleContainer": {
    padding: 0,
    justifyContent: "left",
    "& .MuiDataGrid-sortIcon": {
      color: theme.palette.secondary.main,
      fontSize: "2rem",
    },
  },
  "& .MuiDataGrid-actionsCell": {
    color: theme.palette.primary.main,
    alignItems: "flex-start",
    [theme.breakpoints.down("sm")]: {
      display: "flex",
      flexDirection: "column",
      gridGap: 0,
      "& .MuiMenuItem-root.MuiMenuItem-gutters.MuiButtonBase-root": { minHeight: "0 !important" },
    },
  },
  "& .MuiDataGrid-actionsCell > *": {
    marginRight: theme.spacing(1),
    "&:last-child": {
      marginRight: 0,
    },
  },
  "& .MuiMenuItem-root .MuiListItemIcon-root": {
    minWidth: "unset",
    marginRight: theme.spacing(0.5),
  },
  "& .MuiDataGrid-overlayWrapper": { height: "10rem" },
  "& .MuiDataGrid-row:hover": {
    cursor: "pointer",
  },
}))

type DataTableProps = {
  columns: GridColDef[]
  rows: Array<SubmissionRow | DataFolderRow | DataFileRow>
  page?: number
  totalItems?: number
  sortingModel: GridSortModel
  fetchPageOnChange?: (page: number) => void
}

const DataTable: React.FC<DataTableProps> = props => {
  const { columns, rows, totalItems, sortingModel, fetchPageOnChange } = props
  const { t } = useTranslation()

  const [paginationModel, setPaginationModel] = React.useState({ pageSize: 5, page: 0 })
  const [sortModel, setSortModel] = React.useState<GridSortModel>(sortingModel)

  const handleChangePage = (_e: unknown, newPage: number) => {
    fetchPageOnChange ? fetchPageOnChange(newPage) : null
    setPaginationModel(prev => ({ ...prev, page: newPage }))
  }

  const DataGridPagination = () =>
    totalItems && paginationModel.page !== undefined && paginationModel.pageSize ? (
      <WizardPagination
        totalNumberOfItems={totalItems}
        page={paginationModel.page}
        itemsPerPage={paginationModel.pageSize}
        handleChangePage={handleChangePage}
        handleItemsPerPageChange={e =>
          setPaginationModel(prev => ({
            ...prev,
            pageSize: parseInt(e.target.value, 10),
            page: 0,
          }))
        }
      />
    ) : null

  const NoRowsOverlay = () => (
    <Stack height="100%" alignItems="center" justifyContent="center">
      {t("dataTable.noResults")}
    </Stack>
  )

  return (
    <Box sx={{ display: "flex" }}>
      <Table
        rows={rows}
        columns={columns}
        disableRowSelectionOnClick
        disableColumnMenu
        disableColumnFilter
        disableColumnSelector
        hideFooterSelectedRowCount
        slots={{
          pagination: DataGridPagination,
          noRowsOverlay: NoRowsOverlay,
        }}
        paginationModel={paginationModel}
        onPaginationModelChange={newPaginationModel => setPaginationModel(newPaginationModel)}
        sortModel={sortModel}
        onSortModelChange={(newSortModel: GridSortModel) => setSortModel(newSortModel)}
      />
    </Box>
  )
}

export default DataTable

1	import React from "react"	1✔
2
3	import Box from "@mui/material/Box"	1✔
4	import Stack from "@mui/material/Stack"	1✔
5	import { styled } from "@mui/material/styles"	1✔
6	import { DataGrid, GridColDef, GridSortModel } from "@mui/x-data-grid"	1✔
7	import { useTranslation } from "react-i18next"	1✔
8
9	import WizardPagination from "components/SubmissionWizard/WizardComponents/WizardPagination"	1✔
10	import type { SubmissionRow, DataFolderRow, DataFileRow } from "types"
11
12	const Table = styled(DataGrid)(({ theme }) => ({	1✔
13	color: theme.palette.secondary.main,	6✔
14	"& .MuiDataGrid-columnSeparator, & .MuiDataGrid-cell:last-of-type": {	6✔
15	display: "none",	6✔
16	},	6✔
17	"& .MuiDataGrid-columnHeaders .MuiDataGrid-columnHeader": {	6✔
18	backgroundColor: theme.palette.common.white,	6✔
19	"&:hover": {	6✔
20	color: theme.palette.primary.main,	6✔
21	backgroundColor: theme.palette.primary.lighter,	6✔
22	},	6✔
23	flex: "1 1 auto",	6✔
24	},	6✔
25	"& .MuiDataGrid-columnHeaderTitle": {	6✔
26	fontWeight: 700,	6✔
27	},	6✔
28	"& .MuiDataGrid-columnHeaderTitleContainer": {	6✔
29	padding: 0,	6✔
30	justifyContent: "left",	6✔
31	"& .MuiDataGrid-sortIcon": {	6✔
32	color: theme.palette.secondary.main,	6✔
33	fontSize: "2rem",	6✔
34	},	6✔
35	},	6✔
36	"& .MuiDataGrid-actionsCell": {	6✔
37	color: theme.palette.primary.main,	6✔
38	alignItems: "flex-start",	6✔
39	[theme.breakpoints.down("sm")]: {	6✔
40	display: "flex",	6✔
41	flexDirection: "column",	6✔
42	gridGap: 0,	6✔
43	"& .MuiMenuItem-root.MuiMenuItem-gutters.MuiButtonBase-root": { minHeight: "0 !important" },	6✔
44	},	6✔
45	},	6✔
46	"& .MuiDataGrid-actionsCell > *": {	6✔
47	marginRight: theme.spacing(1),	6✔
48	"&:last-child": {	6✔
49	marginRight: 0,	6✔
50	},	6✔
51	},	6✔
52	"& .MuiMenuItem-root .MuiListItemIcon-root": {	6✔
53	minWidth: "unset",	6✔
54	marginRight: theme.spacing(0.5),	6✔
55	},	6✔
56	"& .MuiDataGrid-overlayWrapper": { height: "10rem" },	6✔
57	"& .MuiDataGrid-row:hover": {	6✔
58	cursor: "pointer",	6✔
59	},	6✔
60	}))	1✔
61
62	type DataTableProps = {
63	columns: GridColDef[]
64	rows: Array<SubmissionRow \| DataFolderRow \| DataFileRow>
65	page?: number
66	totalItems?: number
67	sortingModel: GridSortModel
68	fetchPageOnChange?: (page: number) => void
69	}
70
71	const DataTable: React.FC<DataTableProps> = props => {	1✔
72	const { columns, rows, totalItems, sortingModel, fetchPageOnChange } = props	6✔
73	const { t } = useTranslation()	6✔
74
75	const [paginationModel, setPaginationModel] = React.useState({ pageSize: 5, page: 0 })	6✔
76	const [sortModel, setSortModel] = React.useState<GridSortModel>(sortingModel)	6✔
77
78	const handleChangePage = (_e: unknown, newPage: number) => {	6✔
79	fetchPageOnChange ? fetchPageOnChange(newPage) : null	×
NEW 80	setPaginationModel(prev => ({ ...prev, page: newPage }))	×
81	}	×
82
83	const DataGridPagination = () =>	6✔
84	totalItems && paginationModel.page !== undefined && paginationModel.pageSize ? (	6!
85	<WizardPagination	×
86	totalNumberOfItems={totalItems}	×
87	page={paginationModel.page}	×
88	itemsPerPage={paginationModel.pageSize}	×
89	handleChangePage={handleChangePage}	×
90	handleItemsPerPageChange={e =>	×
91	setPaginationModel(prev => ({	×
92	...prev,	×
93	pageSize: parseInt(e.target.value, 10),	×
94	page: 0,	×
95	}))	×
96	}	×
97	/>
98	) : null	6✔
99
100	const NoRowsOverlay = () => (	6✔
101	<Stack height="100%" alignItems="center" justifyContent="center">	8✔
102	{t("dataTable.noResults")}	8✔
103	</Stack>	8✔
104	)
105
106	return (	6✔
107	<Box sx={{ display: "flex" }}>	6✔
108	<Table	6✔
109	rows={rows}	6✔
110	columns={columns}	6✔
111	disableRowSelectionOnClick	6✔
112	disableColumnMenu	6✔
113	disableColumnFilter	6✔
114	disableColumnSelector	6✔
115	hideFooterSelectedRowCount	6✔
116	slots={{	6✔
117	pagination: DataGridPagination,	6✔
118	noRowsOverlay: NoRowsOverlay,	6✔
119	}}	6✔
120	paginationModel={paginationModel}	6✔
121	onPaginationModelChange={newPaginationModel => setPaginationModel(newPaginationModel)}	6✔
122	sortModel={sortModel}	6✔
123	onSortModelChange={(newSortModel: GridSortModel) => setSortModel(newSortModel)}	6✔
124	/>
125	</Box>	6✔
126	)
127	}	6✔
128
129	export default DataTable	1✔

CSCfi / metadata-submitter-frontend / 14967703433

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