8652005424

Committed 11 Apr 2024 07:10PM UTC coverage: 97.361% (-0.1%) from 97.459%

Build # 8652005424

Build Type

Pull #369

github

Committed by

GermanSaracca

Commit Message

feat: Bring back error validation alert and add tests

Pull Request Pull Request #369: Feature/sub branch/dynamic fields and validation

Run Details

692 of 725 branches covered (95.45%)

Branch coverage included in aggregate %.

217 of 219 new or added lines in 28 files covered. (99.09%)

1 existing line in 1 file now uncovered.

1854 of 1890 relevant lines covered (98.1%)

3653.11 hits per line

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

92.11

/src/sections/create-dataset/CreateDatasetForm.tsx

import { MouseEvent, useEffect, useMemo } from 'react'
import { Form, Accordion, Alert, Button } from '@iqss/dataverse-design-system'
import { useNavigate } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import { FormProvider, useForm } from 'react-hook-form'
import { RequiredFieldText } from '../shared/form/RequiredFieldText/RequiredFieldText'
import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
import { useCreateDatasetForm, SubmissionStatus } from './useCreateDatasetForm'
import { useLoading } from '../loading/LoadingContext'
import { DatasetRepository } from '../../dataset/domain/repositories/DatasetRepository'
import { MetadataBlockInfoRepository } from '../../metadata-block-info/domain/repositories/MetadataBlockInfoRepository'
import { Route } from '../Route.enum'
import { useGetMetadataBlocksInfo } from './useGetMetadataBlocksInfo'
import { MetadataBlockFormFields } from './MetadataBlockFormFields'
import { MetadataBlocksSkeleton } from './MetadataBlocksSkeleton'
import styles from './CreateDatasetForm.module.scss'

interface CreateDatasetFormProps {
  repository: DatasetRepository
  metadataBlockInfoRepository: MetadataBlockInfoRepository
  collectionId?: string
}

export function CreateDatasetForm({
  repository,
  metadataBlockInfoRepository,
  collectionId = 'root'
}: CreateDatasetFormProps) {
  const navigate = useNavigate()
  const { t } = useTranslation('createDataset')
  const { isLoading, setIsLoading } = useLoading()
  const {
    metadataBlocks,
    isLoading: isLoadingMetadataBlocksToRender,
    error: errorLoadingMetadataBlocksToRender
  } = useGetMetadataBlocksInfo({
    metadataBlockInfoRepository,
    collectionId,
    mode: 'create'
  })

  const isErrorLoadingMetadataBlocksToRender = Boolean(errorLoadingMetadataBlocksToRender)
  const { submissionStatus, submitForm } = useCreateDatasetForm(repository)

  const form = useForm({ mode: 'onChange' })
  const formHasErrors = Object.keys(form.formState.errors).length > 0

  const handleCancel = (event: MouseEvent<HTMLButtonElement>) => {
    event.preventDefault()
    navigate(Route.HOME)
  }

  useEffect(() => {
    setIsLoading(false)
  }, [isLoading])

  const disableSubmitButton = useMemo(() => {
    return (
      isErrorLoadingMetadataBlocksToRender ||
      isLoadingMetadataBlocksToRender ||
      submissionStatus === SubmissionStatus.IsSubmitting
    )
  }, [isErrorLoadingMetadataBlocksToRender, isLoadingMetadataBlocksToRender, submissionStatus])

  return (
    <article>
      <header className={styles.header}>
        <h1>{t('pageTitle')}</h1>
      </header>
      <SeparationLine />

      <div className={styles.container}>
        <RequiredFieldText />
        {isErrorLoadingMetadataBlocksToRender && (
          <Alert variant="danger" dismissible={false}>
            {errorLoadingMetadataBlocksToRender}
          </Alert>
        )}
        {submissionStatus === SubmissionStatus.IsSubmitting && (
          <p>{t('datasetForm.status.submitting')}</p>
        )}

        {submissionStatus === SubmissionStatus.SubmitComplete && (
          <p>{t('datasetForm.status.success')}</p>
        )}
        {(submissionStatus === SubmissionStatus.Errored || formHasErrors) && (
          <Alert variant={'danger'} customHeading={t('validationAlert.title')} dismissible={false}>
            {t('validationAlert.content')}
          </Alert>
        )}

        <FormProvider {...form}>
          <Form onSubmit={form.handleSubmit(submitForm)}>
            {isLoadingMetadataBlocksToRender && <MetadataBlocksSkeleton />}
            {!isLoadingMetadataBlocksToRender && metadataBlocks.length > 0 && (
              <Accordion defaultActiveKey="0" data-testid="metadatablocks-accordion">
                {metadataBlocks.map((metadataBlock, index) => (
                  <Accordion.Item eventKey={index.toString()} key={metadataBlock.id}>
                    <Accordion.Header>{metadataBlock.displayName}</Accordion.Header>
                    <Accordion.Body>
                      <MetadataBlockFormFields metadataBlock={metadataBlock} />
                    </Accordion.Body>
                  </Accordion.Item>
                ))}
              </Accordion>
            )}

            <SeparationLine />
            <Alert variant={'info'} customHeading={t('metadataTip.title')} dismissible={false}>
              {t('metadataTip.content')}
            </Alert>
            <Button type="submit" disabled={disableSubmitButton}>
              {t('saveButton')}
            </Button>
            <Button
              withSpacing
              variant="secondary"
              type="button"
              onClick={handleCancel}
              disabled={submissionStatus === SubmissionStatus.IsSubmitting}>
              {t('cancelButton')}
            </Button>
          </Form>
        </FormProvider>
      </div>
    </article>
  )
}

1	import { MouseEvent, useEffect, useMemo } from 'react'
2	import { Form, Accordion, Alert, Button } from '@iqss/dataverse-design-system'
3	import { useNavigate } from 'react-router-dom'
4	import { useTranslation } from 'react-i18next'
5	import { FormProvider, useForm } from 'react-hook-form'
6	import { RequiredFieldText } from '../shared/form/RequiredFieldText/RequiredFieldText'
7	import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
8	import { useCreateDatasetForm, SubmissionStatus } from './useCreateDatasetForm'
9	import { useLoading } from '../loading/LoadingContext'
10	import { DatasetRepository } from '../../dataset/domain/repositories/DatasetRepository'
11	import { MetadataBlockInfoRepository } from '../../metadata-block-info/domain/repositories/MetadataBlockInfoRepository'
12	import { Route } from '../Route.enum'
13	import { useGetMetadataBlocksInfo } from './useGetMetadataBlocksInfo'
14	import { MetadataBlockFormFields } from './MetadataBlockFormFields'
15	import { MetadataBlocksSkeleton } from './MetadataBlocksSkeleton'
16	import styles from './CreateDatasetForm.module.scss'
17
18	interface CreateDatasetFormProps {
19	repository: DatasetRepository
20	metadataBlockInfoRepository: MetadataBlockInfoRepository
21	collectionId?: string
22	}
23
24	export function CreateDatasetForm({	13✔
25	repository,
26	metadataBlockInfoRepository,
27	collectionId = 'root'	395✔
28	}: CreateDatasetFormProps) {	395✔
29	const navigate = useNavigate()	395✔
30	const { t } = useTranslation('createDataset')	395✔
31	const { isLoading, setIsLoading } = useLoading()	382✔
32	const {
33	metadataBlocks,
34	isLoading: isLoadingMetadataBlocksToRender,
35	error: errorLoadingMetadataBlocksToRender
36	} = useGetMetadataBlocksInfo({	382✔
37	metadataBlockInfoRepository,
38	collectionId,
39	mode: 'create'
40	})
41
42	const isErrorLoadingMetadataBlocksToRender = Boolean(errorLoadingMetadataBlocksToRender)	382✔
43	const { submissionStatus, submitForm } = useCreateDatasetForm(repository)	382✔
44
45	const form = useForm({ mode: 'onChange' })	382✔
46	const formHasErrors = Object.keys(form.formState.errors).length > 0	382✔
47
48	const handleCancel = (event: MouseEvent<HTMLButtonElement>) => {	382✔
49	event.preventDefault()	×
UNCOV 50	navigate(Route.HOME)	×
51	}
52
53	useEffect(() => {	382✔
54	setIsLoading(false)	97✔
55	}, [isLoading])
56
57	const disableSubmitButton = useMemo(() => {	382✔
58	return (	204✔
59	isErrorLoadingMetadataBlocksToRender \|\|	505✔
60	isLoadingMetadataBlocksToRender \|\|
61	submissionStatus === SubmissionStatus.IsSubmitting
62	)
63	}, [isErrorLoadingMetadataBlocksToRender, isLoadingMetadataBlocksToRender, submissionStatus])
64
65	return (	382✔
66	<article>
67	<header className={styles.header}>
68	<h1>{t('pageTitle')}</h1>
69	</header>
70	<SeparationLine />
71
72	<div className={styles.container}>
73	<RequiredFieldText />
74	{isErrorLoadingMetadataBlocksToRender && (	387✔
75	<Alert variant="danger" dismissible={false}>
76	{errorLoadingMetadataBlocksToRender}
77	</Alert>
78	)}
79	{submissionStatus === SubmissionStatus.IsSubmitting && (	382!
80	<p>{t('datasetForm.status.submitting')}</p>
81	)}
82
83	{submissionStatus === SubmissionStatus.SubmitComplete && (	396✔
84	<p>{t('datasetForm.status.success')}</p>	878✔
85	)}
86	{(submissionStatus === SubmissionStatus.Errored \|\| formHasErrors) && (
87	<Alert variant={'danger'} customHeading={t('validationAlert.title')} dismissible={false}>
88	{t('validationAlert.content')}
89	</Alert>
90	)}
91
92	<FormProvider {...form}>
93	<Form onSubmit={form.handleSubmit(submitForm)}>
94	{isLoadingMetadataBlocksToRender && <MetadataBlocksSkeleton />}	479✔
95	{!isLoadingMetadataBlocksToRender && metadataBlocks.length > 0 && (	947✔
96	<Accordion defaultActiveKey="0" data-testid="metadatablocks-accordion">
97	{metadataBlocks.map((metadataBlock, index) => (
98	<Accordion.Item eventKey={index.toString()} key={metadataBlock.id}>	560✔
99	<Accordion.Header>{metadataBlock.displayName}</Accordion.Header>
100	<Accordion.Body>
101	<MetadataBlockFormFields metadataBlock={metadataBlock} />
102	</Accordion.Body>
103	</Accordion.Item>
104	))}
105	</Accordion>
106	)}
107
108	<SeparationLine />
109	<Alert variant={'info'} customHeading={t('metadataTip.title')} dismissible={false}>
110	{t('metadataTip.content')}
111	</Alert>
112	<Button type="submit" disabled={disableSubmitButton}>
113	{t('saveButton')}
114	</Button>
115	<Button
116	withSpacing
117	variant="secondary"
118	type="button"
119	onClick={handleCancel}
120	disabled={submissionStatus === SubmissionStatus.IsSubmitting}>
121	{t('cancelButton')}
122	</Button>
123	</Form>
124	</FormProvider>
125	</div>
126	</article>
127	)
128	}	13✔

IQSS / dataverse-frontend / 8652005424

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