20331691855

Committed 18 Dec 2025 09:07AM UTC coverage: 55.065% (-3.3%) from 58.346%

Build # 20331691855

Build Type

push

github

Committed by Hang Le

Commit Message

Update dependency @vitest/coverage-v8 to v4 (merge commit)

Merge branch 'renovate/vitest-coverage-v8-4.x' into 'main'
* Update dependency @vitest/coverage-v8 to v4

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

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

Run Details

476 of 1055 branches covered (45.12%)

Branch coverage included in aggregate %.

1307 of 2183 relevant lines covered (59.87%)

8.04 hits per line

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

67.86

/src/components/SubmissionWizard/WizardComponents/WizardAlert.tsx

import React, { useEffect } from "react"

import WarningIcon from "@mui/icons-material/Warning"
import Box from "@mui/material/Box"
import Button from "@mui/material/Button"
import Dialog from "@mui/material/Dialog"
import DialogActions from "@mui/material/DialogActions"
import DialogContent from "@mui/material/DialogContent"
import DialogContentText from "@mui/material/DialogContentText"
import { styled } from "@mui/material/styles"
import Typography from "@mui/material/Typography"
import { useTranslation } from "react-i18next"

import { setAlert, resetAlert } from "features/wizardAlertSlice"
import { useAppDispatch } from "hooks"
import type { CurrentFormObject } from "types"

const CustomDialog = styled(Dialog)(({ theme }) => ({
  "& .MuiDialog-paper": {
    backgroundColor: theme.palette.background.paper,
    borderLeft: `1.25rem solid ${theme.palette.warning.main}`,
    borderTop: `0.25rem solid ${theme.palette.warning.main}`,
    borderRight: `0.25rem solid ${theme.palette.warning.main}`,
    borderBottom: `0.25rem solid ${theme.palette.warning.main}`,
    lineHeight: "1",
    boxShadow: "0 0.25rem 0.625rem rgba(0, 0, 0, 0.2)",
    padding: "0.5rem",
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "center",
  },
}))

const CustomBox = styled(Box)(() => ({
  width: "100%",
  padding: "0 3rem",
  paddingTop: "0",
  display: "flex",
  flexDirection: "row",
  alignItems: "flex-start",
}))

const IconBox = styled(Box)(() => ({
  width: "10%",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
}))

const ContentBox = styled(Box)(() => ({
  minWidth: "45rem",
  display: "flex",
  flexDirection: "column",
  paddingLeft: "2rem",
}))

const CustomDialogTitle = styled(Typography)(() => ({
  fontSize: "1.5rem",
  fontWeight: "bold",
}))

const StyledWarningIcon = styled(WarningIcon)(({ theme }) => ({
  color: theme.palette.warning.main,
  fontSize: "3rem",
}))

const CustomDialogContentText = styled(DialogContentText)(({ theme }) => ({
  color: theme.palette.text.primary,
  padding: "1rem",
  paddingTop: "0.5rem",
  paddingLeft: 0,
}))

/*
 * Dialog contents are rendered based on parent component location and alert type
 */
const CancelFormDialog = ({
  handleDialog,
  alertType,
  parentLocation,
}: {
  handleDialog: (status: boolean, formData?: CurrentFormObject[]) => void
  alertType?: string
  parentLocation: string
}) => {
  const { t } = useTranslation()
  let [dialogTitle, dialogContent] = ["", ""]
  let dialogActions

  switch (parentLocation) {
    case "submission": {
      switch (alertType) {
        case "exit": {
          dialogTitle = t("alerts.exit.title")
          dialogContent = t("alerts.exit.content")
          dialogActions = (
            <DialogActions>
              <Button variant="outlined" onClick={() => handleDialog(true)} color="primary">
                {t("alerts.actions.exit")}
              </Button>
              <Button variant="contained" onClick={() => handleDialog(false)} color="primary">
                {t("alerts.actions.cancel")}
              </Button>
            </DialogActions>
          )
          break
        }
        case "link": {
          dialogContent = t("alerts.link.content")
          dialogActions = (
            <DialogActions>
              <Button
                variant="outlined"
                onClick={() => handleDialog(true)}
                color="primary"
                data-testid="link-bucket-confirm"
              >
                {t("alerts.actions.link")}
              </Button>
              <Button variant="contained" onClick={() => handleDialog(false)} color="primary">
                {t("alerts.actions.cancel")}
              </Button>
            </DialogActions>
          )
          break
        }
        default: {
          dialogTitle = "default"
          dialogContent = "default content"
        }
      }
      break
    }
    case "header": {
      switch (alertType) {
        case "save": {
          dialogTitle = t("alerts.save.title")
          dialogContent = t("alerts.save.content")
          dialogActions = (
            <DialogActions style={{ justifyContent: "flex-end" }}>
              <Button
                variant="outlined"
                onClick={() => handleDialog(false)}
                color="primary"
                autoFocus
              >
                {t("alerts.actions.continueSubmission")}
              </Button>
              <Button
                variant="contained"
                aria-label={t("ariaLabels.saveSubmission")}
                onClick={() => handleDialog(true)}
                color="primary"
              >
                {t("alerts.actions.saveExit")}
              </Button>
            </DialogActions>
          )
          break
        }
        default: {
          dialogTitle = "default"
          dialogContent = "default content"
        }
      }
      break
    }
    default: {
      dialogTitle = "default"
      dialogContent = "default content"
    }
  }

  return (
    <CustomDialog
      open={true}
      onClose={() => handleDialog(false)}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogContent style={{ paddingLeft: 0 }}>
        <CustomBox>
          <IconBox>
            <StyledWarningIcon />
          </IconBox>
          <ContentBox>
            <CustomDialogTitle id="alert-dialog-title">{dialogTitle}</CustomDialogTitle>
            <CustomDialogContentText
              id="alert-dialog-description"
              data-testid="alert-dialog-content"
            >
              {dialogContent}
            </CustomDialogContentText>
            <DialogActions style={{ width: "100%", justifyContent: "flex-end", padding: "1rem" }}>
              {dialogActions}
            </DialogActions>
          </ContentBox>
        </CustomBox>
      </DialogContent>
    </CustomDialog>
  )
}

/*
 * Render alert form based on location and type
 */
const WizardAlert = ({
  onAlert,
  parentLocation,
  alertType,
}: {
  onAlert: (status: boolean, formData?: CurrentFormObject[]) => void
  parentLocation: string
  alertType?: string
}) => {
  const dispatch = useAppDispatch()

  useEffect(() => {
    dispatch(setAlert())
  }, [dispatch])

  const handleDialog = (action: boolean, formData?: CurrentFormObject[]) => {
    dispatch(resetAlert())
    onAlert(action, formData)
  }

  return (
    <div>
      <CancelFormDialog
        handleDialog={handleDialog}
        alertType={alertType}
        parentLocation={parentLocation}
      />
    </div>
  )
}

export default WizardAlert

1	import React, { useEffect } from "react"
2
3	import WarningIcon from "@mui/icons-material/Warning"
4	import Box from "@mui/material/Box"
5	import Button from "@mui/material/Button"
6	import Dialog from "@mui/material/Dialog"
7	import DialogActions from "@mui/material/DialogActions"
8	import DialogContent from "@mui/material/DialogContent"
9	import DialogContentText from "@mui/material/DialogContentText"
10	import { styled } from "@mui/material/styles"
11	import Typography from "@mui/material/Typography"
12	import { useTranslation } from "react-i18next"
13
14	import { setAlert, resetAlert } from "features/wizardAlertSlice"
15	import { useAppDispatch } from "hooks"
16	import type { CurrentFormObject } from "types"
17
18	const CustomDialog = styled(Dialog)(({ theme }) => ({	7✔
19	"& .MuiDialog-paper": {
20	backgroundColor: theme.palette.background.paper,
21	borderLeft: `1.25rem solid ${theme.palette.warning.main}`,
22	borderTop: `0.25rem solid ${theme.palette.warning.main}`,
23	borderRight: `0.25rem solid ${theme.palette.warning.main}`,
24	borderBottom: `0.25rem solid ${theme.palette.warning.main}`,
25	lineHeight: "1",
26	boxShadow: "0 0.25rem 0.625rem rgba(0, 0, 0, 0.2)",
27	padding: "0.5rem",
28	display: "flex",
29	flexDirection: "column",
30	justifyContent: "flex-start",
31	alignItems: "center",
32	},
33	}))
34
35	const CustomBox = styled(Box)(() => ({	7✔
36	width: "100%",
37	padding: "0 3rem",
38	paddingTop: "0",
39	display: "flex",
40	flexDirection: "row",
41	alignItems: "flex-start",
42	}))
43
44	const IconBox = styled(Box)(() => ({	7✔
45	width: "10%",
46	display: "flex",
47	justifyContent: "center",
48	alignItems: "center",
49	}))
50
51	const ContentBox = styled(Box)(() => ({	7✔
52	minWidth: "45rem",
53	display: "flex",
54	flexDirection: "column",
55	paddingLeft: "2rem",
56	}))
57
58	const CustomDialogTitle = styled(Typography)(() => ({	7✔
59	fontSize: "1.5rem",
60	fontWeight: "bold",
61	}))
62
63	const StyledWarningIcon = styled(WarningIcon)(({ theme }) => ({	7✔
64	color: theme.palette.warning.main,
65	fontSize: "3rem",
66	}))
67
68	const CustomDialogContentText = styled(DialogContentText)(({ theme }) => ({	7✔
69	color: theme.palette.text.primary,
70	padding: "1rem",
71	paddingTop: "0.5rem",
72	paddingLeft: 0,
73	}))
74
75	/*
76	* Dialog contents are rendered based on parent component location and alert type
77	*/
78	const CancelFormDialog = ({	7✔
79	handleDialog,
80	alertType,
81	parentLocation,
82	}: {
83	handleDialog: (status: boolean, formData?: CurrentFormObject[]) => void
84	alertType?: string
85	parentLocation: string
86	}) => {
87	const { t } = useTranslation()	3✔
88	let [dialogTitle, dialogContent] = ["", ""]	3✔
89	let dialogActions
90
91	switch (parentLocation) {	3!
92	case "submission": {
93	switch (alertType) {	2!
94	case "exit": {
95	dialogTitle = t("alerts.exit.title")	1✔
96	dialogContent = t("alerts.exit.content")	1✔
97	dialogActions = (	1✔
98	<DialogActions>
99	<Button variant="outlined" onClick={() => handleDialog(true)} color="primary">	×
100	{t("alerts.actions.exit")}
101	</Button>
102	<Button variant="contained" onClick={() => handleDialog(false)} color="primary">	×
103	{t("alerts.actions.cancel")}
104	</Button>
105	</DialogActions>
106	)
107	break	1✔
108	}
109	case "link": {
110	dialogContent = t("alerts.link.content")	1✔
111	dialogActions = (	1✔
112	<DialogActions>
113	<Button
114	variant="outlined"
115	onClick={() => handleDialog(true)}	×
116	color="primary"
117	data-testid="link-bucket-confirm"
118	>
119	{t("alerts.actions.link")}
120	</Button>
121	<Button variant="contained" onClick={() => handleDialog(false)} color="primary">	×
122	{t("alerts.actions.cancel")}
123	</Button>
124	</DialogActions>
125	)
126	break	1✔
127	}
128	default: {
129	dialogTitle = "default"	×
130	dialogContent = "default content"	×
131	}
132	}
133	break	2✔
134	}
135	case "header": {
136	switch (alertType) {	1!
137	case "save": {
138	dialogTitle = t("alerts.save.title")	1✔
139	dialogContent = t("alerts.save.content")	1✔
140	dialogActions = (	1✔
141	<DialogActions style={{ justifyContent: "flex-end" }}>
142	<Button
143	variant="outlined"
144	onClick={() => handleDialog(false)}	×
145	color="primary"
146	autoFocus
147	>
148	{t("alerts.actions.continueSubmission")}
149	</Button>
150	<Button
151	variant="contained"
152	aria-label={t("ariaLabels.saveSubmission")}
153	onClick={() => handleDialog(true)}	×
154	color="primary"
155	>
156	{t("alerts.actions.saveExit")}
157	</Button>
158	</DialogActions>
159	)
160	break	1✔
161	}
162	default: {
163	dialogTitle = "default"	×
164	dialogContent = "default content"	×
165	}
166	}
167	break	1✔
168	}
169	default: {
170	dialogTitle = "default"	×
171	dialogContent = "default content"	×
172	}
173	}
174
175	return (	3✔
176	<CustomDialog
177	open={true}
178	onClose={() => handleDialog(false)}	×
179	aria-labelledby="alert-dialog-title"
180	aria-describedby="alert-dialog-description"
181	>
182	<DialogContent style={{ paddingLeft: 0 }}>
183	<CustomBox>
184	<IconBox>
185	<StyledWarningIcon />
186	</IconBox>
187	<ContentBox>
188	<CustomDialogTitle id="alert-dialog-title">{dialogTitle}</CustomDialogTitle>
189	<CustomDialogContentText
190	id="alert-dialog-description"
191	data-testid="alert-dialog-content"
192	>
193	{dialogContent}
194	</CustomDialogContentText>
195	<DialogActions style={{ width: "100%", justifyContent: "flex-end", padding: "1rem" }}>
196	{dialogActions}
197	</DialogActions>
198	</ContentBox>
199	</CustomBox>
200	</DialogContent>
201	</CustomDialog>
202	)
203	}
204
205	/*
206	* Render alert form based on location and type
207	*/
208	const WizardAlert = ({	7✔
209	onAlert,
210	parentLocation,
211	alertType,
212	}: {
213	onAlert: (status: boolean, formData?: CurrentFormObject[]) => void
214	parentLocation: string
215	alertType?: string
216	}) => {
217	const dispatch = useAppDispatch()	3✔
218
219	useEffect(() => {	3✔
220	dispatch(setAlert())	3✔
221	}, [dispatch])
222
223	const handleDialog = (action: boolean, formData?: CurrentFormObject[]) => {	3✔
224	dispatch(resetAlert())	×
225	onAlert(action, formData)	×
226	}
227
228	return (	3✔
229	<div>
230	<CancelFormDialog
231	handleDialog={handleDialog}
232	alertType={alertType}
233	parentLocation={parentLocation}
234	/>
235	</div>
236	)
237	}
238
239	export default WizardAlert

CSCfi / metadata-submitter-frontend / 20331691855

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