Feature/231 create dataset boilerplate

packages/design-system/src/lib/components/form/Form.tsx

@@ -5,13 +5,14 @@ import { FormGroupWithMultipleFields } from './form-group-multiple-fields/FormGr
 import { FormInputGroup } from './form-group/form-input-group/FormInputGroup'
 
 interface FormProps {
+  className?: string
   validated?: boolean
   onSubmit?: (event: FormEvent<HTMLFormElement>) => void
 }
 
-function Form({ validated, onSubmit, children }: PropsWithChildren<FormProps>) {
+function Form({ validated, onSubmit, children, className }: PropsWithChildren<FormProps>) {
   return (
-    <FormBS validated={validated} onSubmit={onSubmit}>
+    <FormBS validated={validated} onSubmit={onSubmit} className={className}>
       {children}
     </FormBS>
   )

packages/design-system/src/lib/components/form/form-group/form-element/FormInput.tsx

@@ -8,17 +8,19 @@ interface FormInputProps extends React.HTMLAttributes<FormInputElement> {
   type?: 'text' | 'email' | 'password'
   readOnly?: boolean
   withinMultipleFieldsGroup?: boolean
+  name?: string
 }
 
 export function FormInput({
   type = 'text',
+  name,
   readOnly,
   withinMultipleFieldsGroup,
   ...props
 }: FormInputProps) {
   return (
     <FormElementLayout withinMultipleFieldsGroup={withinMultipleFieldsGroup}>
-      <FormBS.Control type={type} readOnly={readOnly} plaintext={readOnly} {...props} />
+      <FormBS.Control name={name} type={type} readOnly={readOnly} plaintext={readOnly} {...props} />
     </FormElementLayout>
   )
 }

packages/design-system/src/lib/index.ts

@@ -23,3 +23,4 @@ export { Icon } from './components/icon/Icon'
 export { IconName } from './components/icon/IconName'
 export { Tooltip } from './components/tooltip/Tooltip'
 export { Pagination } from './components/pagination/Pagination'
+export { RequiredInputSymbol } from './components/form/required-input-symbol/RequiredInputSymbol'

public/locales/en/createDataset.json

@@ -0,0 +1,22 @@
+{
+  "pageTitle": "Create Dataset",
+  "metadataTip": {
+    "title": "Metadata Tip",
+    "content": "After adding the dataset, click the Edit Dataset button to add more metadata."
+  },
+  "requiredFields": "Asterisks indicate required fields",
+  "datasetForm": {
+    "title": "Title",
+    "status": {
+      "submitting": "Submitting...",
+      "success": "Form submitted successfully!",
+      "failed": "Error: Submission failed."
+    }
+  },
+  "datasetFormStates": {
+    "submitting": "Form Submitting",
+    "submissionSuccess": "Form submission successful"
+  },
+  "saveButton": "Save Dataset",
+  "cancelButton": "Cancel"
+}

src/Router.tsx

@@ -2,6 +2,8 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { Layout } from './sections/layout/Layout'
 import { Route } from './sections/Route.enum'
 import { DatasetFactory } from './sections/dataset/DatasetFactory'
+import { PageNotFound } from './sections/page-not-found/PageNotFound'
+import { CreateDatasetFactory } from './sections/create-dataset/CreateDatasetFactory'
 import { FileFactory } from './sections/file/FileFactory'
 import { HomeFactory } from './sections/home/HomeFactory'
 
@@ -10,6 +12,7 @@ const router = createBrowserRouter(
     {
       path: '/',
       element: <Layout />,
+      errorElement: <PageNotFound />,
       children: [
         {
           path: Route.HOME,
@@ -19,6 +22,10 @@ const router = createBrowserRouter(
           path: Route.DATASETS,
           element: DatasetFactory.create()
         },
+        {
+          path: Route.CREATE_DATASET,
+          element: CreateDatasetFactory.create()
+        },
         {
           path: Route.FILES,
           element: FileFactory.create()

src/dataset/domain/models/DatasetFormFields.ts

@@ -0,0 +1,3 @@
+export interface DatasetFormFields {
+  createDatasetTitle: string
+}

src/dataset/domain/models/DatasetValidationResponse.ts

@@ -0,0 +1,6 @@
+import { DatasetFormFields } from '../models/DatasetFormFields'
+
+export interface DatasetValidationResponse {
+  isValid: boolean
+  errors: Record<keyof DatasetFormFields, string | undefined>
+}

src/dataset/domain/repositories/DatasetRepository.ts

@@ -2,10 +2,13 @@ import { Dataset } from '../models/Dataset'
 import { TotalDatasetsCount } from '../models/TotalDatasetsCount'
 import { DatasetPaginationInfo } from '../models/DatasetPaginationInfo'
 import { DatasetPreview } from '../models/DatasetPreview'
+import { DatasetFormFields } from '../models/DatasetFormFields'
 
 export interface DatasetRepository {
   getByPersistentId: (persistentId: string, version?: string) => Promise<Dataset | undefined>
   getByPrivateUrlToken: (privateUrlToken: string) => Promise<Dataset | undefined>
   getAll: (paginationInfo: DatasetPaginationInfo) => Promise<DatasetPreview[]>
   getTotalDatasetsCount: () => Promise<TotalDatasetsCount>
+  // Created as placeholder for https://github.com/IQSS/dataverse-frontend/pull/251
+  createDataset: (fields: DatasetFormFields) => Promise<string>
 }

src/dataset/domain/useCases/createDataset.ts

@@ -0,0 +1,17 @@
+import { DatasetFormFields } from '../models/DatasetFormFields'
+import { DatasetRepository } from '../repositories/DatasetRepository'
+import { DatasetJSDataverseRepository } from '../../infrastructure/repositories/DatasetJSDataverseRepository'
+
+const repo = new DatasetJSDataverseRepository()
+function createDatasetMockHelper(
+  datasetRepository: DatasetRepository,
+  formFieldsToSubmit: DatasetFormFields
+): Promise<string> {
+  return datasetRepository.createDataset(formFieldsToSubmit).catch((error: Error) => {
+    throw new Error(error.message)
+  })
+}
+
+export function createDataset(fields: DatasetFormFields): Promise<string> {
+  return createDatasetMockHelper(repo, fields)
+}

src/dataset/domain/useCases/validateDataset.ts

@@ -0,0 +1,19 @@
+import { DatasetFormFields } from '../models/DatasetFormFields'
+import { DatasetValidationResponse } from '../models/DatasetValidationResponse'
+const NAME_REQUIRED = 'Name is required'
+
+export function validateDataset(fieldsToSubmit: DatasetFormFields) {
+  const errors: Record<keyof DatasetFormFields, string | undefined> = {
+    createDatasetTitle: undefined
+  }
+
+  if (!fieldsToSubmit.createDatasetTitle) {
+    errors.createDatasetTitle = NAME_REQUIRED
+  }
+
+  const validationResponse: DatasetValidationResponse = {
+    isValid: Object.values(errors).every((error) => error === undefined),
+    errors
+  }
+  return validationResponse
+}

src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts

@@ -23,6 +23,7 @@ import { TotalDatasetsCount } from '../../domain/models/TotalDatasetsCount'
 import { DatasetPaginationInfo } from '../../domain/models/DatasetPaginationInfo'
 import { DatasetPreview } from '../../domain/models/DatasetPreview'
 import { JSDatasetPreviewMapper } from '../mappers/JSDatasetPreviewMapper'
+import { DatasetFormFields } from '../../domain/models/DatasetFormFields'
 
 const includeDeaccessioned = true
 
@@ -135,6 +136,15 @@ export class DatasetJSDataverseRepository implements DatasetRepository {
       })
   }
 
+  createDataset(fields: DatasetFormFields): Promise<string> {
+    const returnMsg = 'Form Data Submitted: ' + JSON.stringify(fields)
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(returnMsg)
+      }, 1000)
+    })
+  }
+
   versionToVersionId(version?: string): string | undefined {
     if (version === 'DRAFT') {
       return ':draft'

src/sections/Route.enum.ts

@@ -4,5 +4,6 @@ export enum Route {
   LOG_IN = '/loginpage.xhtml?redirectPage=%2Fdataverse.xhtml',
   LOG_OUT = '/',
   DATASETS = '/datasets',
+  CREATE_DATASET = '/datasets/create',
   FILES = '/files'
 }

src/sections/create-dataset/CreateDatasetFactory.tsx

@@ -0,0 +1,8 @@
+import { CreateDatasetForm } from './CreateDatasetForm'
+import { ReactElement } from 'react'
+
+export class CreateDatasetFactory {
+  static create(): ReactElement {
+    return <CreateDatasetForm />
+  }
+}

src/sections/create-dataset/CreateDatasetForm.tsx

@@ -0,0 +1,76 @@
+import { ChangeEvent, FormEvent } from 'react'
+import { Alert, Button, Col, Form, Row } from '@iqss/dataverse-design-system'
+import { useTranslation } from 'react-i18next'
+import { RequiredFieldText } from '../shared/form/RequiredFieldText/RequiredFieldText'
+import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
+import { useCreateDatasetForm, SubmissionStatusEnums } from './useCreateDatasetForm'
+import styles from '/src/sections/dataset/Dataset.module.scss'
+
+export function CreateDatasetForm() {
+  const { formErrors, submissionStatus, updateFormData, submitFormData } = useCreateDatasetForm()
+
+  const { t } = useTranslation('createDataset')
+
+  const handleCreateDatasetFieldChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target
+    updateFormData({ [name]: value })
+  }
+
+  const handleCreateDatasetSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    submitFormData()
+  }
+
+  return (
+    <article>
+      <header className={styles.header}>
+        <h1>{t('pageTitle')}</h1>
+      </header>
+      <SeparationLine />
+      <div className={styles.container}>
+        <RequiredFieldText />
+        {submissionStatus === SubmissionStatusEnums.IsSubmitting && (
+          <p>{t('datasetForm.status.submitting')}</p>
+        )}
+        {submissionStatus === SubmissionStatusEnums.SubmitComplete && (
+          <p>{t('datasetForm.status.success')}</p>
+        )}
+        {submissionStatus === SubmissionStatusEnums.Errored && (
+          <p>{t('datasetForm.status.fail')}</p>
+        )}
+        <Form
+          onSubmit={(event: FormEvent<HTMLFormElement>) => {
+            handleCreateDatasetSubmit(event)
+          }}
+          className={'create-dataset-form'}>
+          <Row>
+            <Col md={9}>
+              <Form.Group controlId="createDatasetTitle" required>
+                <Form.Group.Label>{t('datasetForm.title')}</Form.Group.Label>
+                <Form.Group.Input
+                  readOnly={submissionStatus === SubmissionStatusEnums.IsSubmitting && true}
+                  type="text"
+                  name="createDatasetTitle"
+                  placeholder="Dataset Title"
+                  onChange={handleCreateDatasetFieldChange}
+                  withinMultipleFieldsGroup={false}
+                />
+              </Form.Group>
+              {formErrors.createDatasetTitle && <span>{formErrors.createDatasetTitle}</span>}
+            </Col>
+          </Row>
+          <SeparationLine />
+          <Alert variant={'info'} customHeading={t('metadataTip.title')} dismissible={false}>
+            {t('metadataTip.content')}
+          </Alert>
+          <Button type="submit" disabled={submissionStatus === SubmissionStatusEnums.IsSubmitting}>
+            {t('saveButton')}
+          </Button>
+          <Button withSpacing variant="secondary">
+            {t('cancelButton')}
+          </Button>
+        </Form>
+      </div>
+    </article>
+  )
+}

src/sections/create-dataset/useCreateDatasetForm.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react'
+import { DatasetFormFields } from '../../dataset/domain/models/DatasetFormFields'
+import { createDataset } from '../../dataset/domain/useCases/createDataset'
+import { validateDataset } from '../../dataset/domain/useCases/validateDataset'
+import { DatasetValidationResponse } from '../../dataset/domain/models/DatasetValidationResponse'
+interface FormContextInterface {
+  fields: DatasetFormFields
+}
+
+const defaultFormState: DatasetFormFields = {
+  createDatasetTitle: ''
+}
+
+export enum SubmissionStatusEnums {
+  NotSubmitted = 'NotSubmitted',
+  IsSubmitting = 'IsSubmitting',
+  SubmitComplete = 'SubmitComplete',
+  Errored = 'Errored'
+}
+
+export function useCreateDatasetForm() {
+  const [formState, setFormState] = useState<FormContextInterface>({
+    fields: defaultFormState
+  })
+
+  const [submissionStatus, setSubmissionStatus] = useState<SubmissionStatusEnums>(
+    SubmissionStatusEnums.NotSubmitted
+  )
+  const [formErrors, setFormErrors] = useState<Record<keyof DatasetFormFields, string | undefined>>(
+    { createDatasetTitle: undefined }
+  )
+
+  const updateFormData = (updatedFormData: object) => {
+    setFormState((prevState) => ({
+      ...prevState,
+      fields: { ...prevState.fields, ...updatedFormData }
+    }))
+  }
+
+  const submitFormData = () => {
+    setSubmissionStatus(SubmissionStatusEnums.IsSubmitting)
+
+    const validationResult: DatasetValidationResponse = validateDataset(formState.fields)
+
+    if (validationResult.isValid) {
+      createDataset(formState.fields)
+        .then(() => setSubmissionStatus(SubmissionStatusEnums.IsSubmitting))
+        .catch(() => setSubmissionStatus(SubmissionStatusEnums.Errored))
+        .finally(() => setSubmissionStatus(SubmissionStatusEnums.SubmitComplete))
+    } else {
+      setFormErrors(validationResult.errors)
+      setSubmissionStatus(SubmissionStatusEnums.Errored)
+    }
+  }
+
+  return {
+    formState,
+    formErrors,
+    submissionStatus,
+    updateFormData,
+    submitFormData
+  }
+}

src/sections/dataset/Dataset.module.scss

@@ -12,9 +12,4 @@
 
 .tab-container {
   padding: 1em 0;
-}
-
-.separation-line {
-  margin: 1em 0;
-  border-bottom: 1px solid #dee2e6;
 }

src/sections/dataset/Dataset.tsx

@@ -16,6 +16,7 @@ import { useEffect } from 'react'
 import { DatasetAlerts } from './dataset-alerts/DatasetAlerts'
 import { useNotImplementedModal } from '../not-implemented/NotImplementedModalContext'
 import { NotImplementedModal } from '../not-implemented/NotImplementedModal'
+import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
 
 interface DatasetProps {
   fileRepository: FileRepository
@@ -87,7 +88,7 @@ export function Dataset({ fileRepository }: DatasetProps) {
                 </div>
               </Tabs.Tab>
             </Tabs>
-            <div className={styles['separation-line']}></div>
+            <SeparationLine />
           </div>
         </article>
       )}

src/sections/layout/Layout.module.scss

@@ -1,4 +1,4 @@
-@import "src/sections/assets/variables";
+@import "src/assets/variables";
 
 .body-container {
     min-height: $body-available-height;

src/sections/layout/header/Header.tsx

@@ -1,4 +1,4 @@
-import logo from '../../assets/logo.svg'
+import logo from '../../../assets/logo.svg'
 import { useTranslation } from 'react-i18next'
 import { Navbar } from '@iqss/dataverse-design-system'
 import { Route } from '../../Route.enum'

src/sections/shared/form/RequiredFieldText/RequiredFieldText.tsx

@@ -0,0 +1,12 @@
+import { RequiredInputSymbol } from '@iqss/dataverse-design-system'
+import { useTranslation } from 'react-i18next'
+
+export function RequiredFieldText() {
+  const { t } = useTranslation('createDataset')
+  return (
+    <p>
+      <RequiredInputSymbol />
+      {t('requiredFields')}
+    </p>
+  )
+}

src/sections/shared/layout/SeparationLine/SeparationLine.module.scss

@@ -0,0 +1,4 @@
+.separation-line {
+  margin: 1em 0;
+  border-bottom: 1px solid #dee2e6;
+}