Merge pull request #354 from IQSS/339-add-alerts-for-create-dataset

339 add alerts for create dataset
IQSS · Apr 4, 2024 · c0f2d0b · c0f2d0b
2 parents 75fe4fb + ede4738
commit c0f2d0b
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 12 deletions.
diff --git a/public/locales/en/createDataset.json b/public/locales/en/createDataset.json
@@ -5,6 +5,10 @@
     "content": "After adding the dataset, click the Edit Dataset button to add more metadata."
   },
   "requiredFields": "Asterisks indicate required fields",
+  "validationAlert": {
+    "title": "Validation Error",
+    "content": "Required fields were missed or there was a validation error. Please scroll down to see details."
+  },
   "datasetForm": {
     "fields": {
       "title": {

diff --git a/public/locales/en/dataset.json b/public/locales/en/dataset.json
@@ -82,6 +82,10 @@
       "heading": "Success!",
       "alertText": "This dataset draft has been deleted."
     },
+    "datasetCreated": {
+      "heading": "Success!",
+      "alertText": "This dataset has been created."
+    },
     "metadataUpdated": {
       "heading": "Success!",
       "alertText": "The metadata for this dataset has been updated."

diff --git a/src/alert/domain/models/Alert.ts b/src/alert/domain/models/Alert.ts
@@ -11,6 +11,7 @@ export enum AlertMessageKey {
   TERMS_UPDATED = 'termsUpdated',
   THUMBNAIL_UPDATED = 'thumbnailUpdated',
   DATASET_DELETED = 'datasetDeleted',
+  DATASET_CREATED = 'datasetCreated',
   PUBLISH_IN_PROGRESS = 'publishInProgress'
 }
 

diff --git a/src/sections/create-dataset/CreateDatasetForm.tsx b/src/sections/create-dataset/CreateDatasetForm.tsx
@@ -61,7 +61,11 @@ export function CreateDatasetForm({ repository }: CreateDatasetFormProps) {
         {submissionStatus === SubmissionStatus.SubmitComplete && (
           <p>{t('datasetForm.status.success')}</p>
         )}
-        {submissionStatus === SubmissionStatus.Errored && <p>{t('datasetForm.status.failed')}</p>}
+        {submissionStatus === SubmissionStatus.Errored && (
+          <Alert variant={'danger'} customHeading={t('validationAlert.title')} dismissible={false}>
+            {t('validationAlert.content')}
+          </Alert>
+        )}
         <Form
           onSubmit={(event: FormEvent<HTMLFormElement>) => {
             handleSubmit(event)

diff --git a/src/sections/create-dataset/useCreateDatasetForm.tsx b/src/sections/create-dataset/useCreateDatasetForm.tsx
@@ -35,7 +35,9 @@ export function useCreateDatasetForm(
     createDataset(repository, formData)
       .then(({ persistentId }) => {
         setSubmissionStatus(SubmissionStatus.SubmitComplete)
-        navigate(`${Route.DATASETS}?persistentId=${persistentId}`)
+        navigate(`${Route.DATASETS}?persistentId=${persistentId}`, {
+          state: { created: true }
+        })
         return
       })
       .catch(() => {

diff --git a/src/sections/dataset/Dataset.tsx b/src/sections/dataset/Dataset.tsx
@@ -1,4 +1,4 @@
-import { Tabs, Col, Row } from '@iqss/dataverse-design-system'
+import { Col, Row, Tabs } from '@iqss/dataverse-design-system'
 import styles from './Dataset.module.scss'
 import { DatasetLabels } from './dataset-labels/DatasetLabels'
 import { useLoading } from '../loading/LoadingContext'
@@ -18,17 +18,24 @@ import { useNotImplementedModal } from '../not-implemented/NotImplementedModalCo
 import { NotImplementedModal } from '../not-implemented/NotImplementedModal'
 import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
+import { useAlertContext } from '../alerts/AlertContext'
+import { AlertMessageKey } from '../../alert/domain/models/Alert'
 
 interface DatasetProps {
   fileRepository: FileRepository
+  created?: boolean
 }
 
-export function Dataset({ fileRepository }: DatasetProps) {
+export function Dataset({ fileRepository, created }: DatasetProps) {
   const { setIsLoading } = useLoading()
   const { dataset, isLoading } = useDataset()
   const { t } = useTranslation('dataset')
   const { hideModal, isModalOpen } = useNotImplementedModal()
+  const { addDatasetAlert } = useAlertContext()
 
+  if (created) {
+    addDatasetAlert({ messageKey: AlertMessageKey.DATASET_CREATED, variant: 'success' })
+  }
   useEffect(() => {
     setIsLoading(isLoading)
   }, [isLoading])

diff --git a/src/sections/dataset/DatasetFactory.tsx b/src/sections/dataset/DatasetFactory.tsx
@@ -1,5 +1,6 @@
 import { ReactElement, useEffect } from 'react'
 import { useSearchParams } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import { Dataset } from './Dataset'
 import { DatasetJSDataverseRepository } from '../../dataset/infrastructure/repositories/DatasetJSDataverseRepository'
 import { useAnonymized } from './anonymized/AnonymizedContext'
@@ -47,6 +48,9 @@ function DatasetWithSearchParams() {
   const privateUrlToken = searchParams.get('privateUrlToken')
   const searchParamVersion = searchParams.get('version') ?? undefined
   const version = searchParamVersionToDomainVersion(searchParamVersion)
+  const location = useLocation()
+  const state = location.state as { created: boolean } | undefined
+  const created = state?.created ?? false
 
   useEffect(() => {
     if (privateUrlToken) setAnonymizedView(true)
@@ -66,7 +70,7 @@ function DatasetWithSearchParams() {
     <DatasetProvider
       repository={datasetRepository}
       searchParams={{ persistentId: persistentId, version: version }}>
-      <Dataset fileRepository={fileRepository} />
+      <Dataset fileRepository={fileRepository} created={created} />
     </DatasetProvider>
   )
 }
diff --git a/src/stories/dataset/Dataset.stories.tsx b/src/stories/dataset/Dataset.stories.tsx
@@ -35,6 +35,10 @@ export const Default: Story = {
   render: () => <Dataset fileRepository={new FileMockRepository()} />
 }
 
+export const Created: Story = {
+  decorators: [WithLayout, WithDatasetDraftAsOwner, WithLoggedInUser, WithNotImplementedModal],
+  render: () => <Dataset fileRepository={new FileMockRepository()} created={true} />
+}
 export const DraftWithAllDatasetPermissions: Story = {
   decorators: [WithLayout, WithDatasetDraftAsOwner, WithLoggedInUser, WithNotImplementedModal],
   render: () => <Dataset fileRepository={new FileMockRepository()} />

diff --git a/tests/component/create-dataset/CreateDatasetForm.spec.tsx b/tests/component/create-dataset/CreateDatasetForm.spec.tsx
@@ -53,7 +53,7 @@ describe('Create Dataset', () => {
 
     cy.findByText('Title is required.').should('exist')
 
-    cy.findByText('Error: Submission failed.').should('exist')
+    cy.findByText('Validation Error').should('exist')
   })
 
   it('shows an error message when the author name is not provided', () => {
@@ -63,7 +63,7 @@ describe('Create Dataset', () => {
 
     cy.findByText('Author name is required.').should('exist')
 
-    cy.findByText('Error: Submission failed.').should('exist')
+    cy.findByText('Validation Error').should('exist')
   })
 
   it('shows an error message when the point of contact email is not provided', () => {
@@ -73,7 +73,7 @@ describe('Create Dataset', () => {
 
     cy.findByText('Point of Contact E-mail is required.').should('exist')
 
-    cy.findByText('Error: Submission failed.').should('exist')
+    cy.findByText('Validation Error').should('exist')
   })
 
   it('shows an error message when the point of contact email is not a valid email', () => {
@@ -87,7 +87,7 @@ describe('Create Dataset', () => {
 
     cy.findByText('Point of Contact E-mail is required.').should('exist')
 
-    cy.findByText('Error: Submission failed.').should('exist')
+    cy.findByText('Validation Error').should('exist')
   })
 
   it('shows an error message when the description text is not provided', () => {
@@ -97,7 +97,7 @@ describe('Create Dataset', () => {
 
     cy.findByText('Description Text is required.').should('exist')
 
-    cy.findByText('Error: Submission failed.').should('exist')
+    cy.findByText('Validation Error').should('exist')
   })
 
   it('shows an error message when the subject is not provided', () => {
@@ -107,7 +107,7 @@ describe('Create Dataset', () => {
 
     cy.findByText('Subject is required.').should('exist')
 
-    cy.findByText('Error: Submission failed.').should('exist')
+    cy.findByText('Validation Error').should('exist')
   })
 
   it('can submit a valid form', () => {
@@ -146,6 +146,6 @@ describe('Create Dataset', () => {
     cy.findByLabelText(/Arts and Humanities/i).check()
 
     cy.findByText(/Save Dataset/i).click()
-    cy.findByText('Error: Submission failed.').should('exist')
+    cy.contains('Validation Error').should('exist')
   })
 })
diff --git a/tests/component/sections/dataset/dataset-alerts/DatasetAlerts.spec.tsx b/tests/component/sections/dataset/dataset-alerts/DatasetAlerts.spec.tsx
@@ -32,6 +32,7 @@ interface DatasetTranslation {
     [AlertMessageKey.TERMS_UPDATED]: AlertTranslation
     [AlertMessageKey.DATASET_DELETED]: AlertTranslation
     [AlertMessageKey.THUMBNAIL_UPDATED]: AlertTranslation
+    [AlertMessageKey.DATASET_CREATED]: AlertTranslation
   }
 }
 

diff --git a/tests/e2e-integration/e2e/sections/create-dataset/CreateDatasetForm.spec.tsx b/tests/e2e-integration/e2e/sections/create-dataset/CreateDatasetForm.spec.tsx
@@ -28,6 +28,8 @@ describe('Create Dataset', () => {
     cy.findByText(/Save Dataset/i).click()
 
     cy.findByRole('heading', { name: 'Test Dataset Title' }).should('exist')
+    cy.findByText('Success!').should('exist')
+    cy.contains('This dataset has been created.').should('exist')
     cy.findByText(DatasetLabelValue.DRAFT).should('exist')
     cy.findByText(DatasetLabelValue.UNPUBLISHED).should('exist')
   })