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,16 @@
+{
+  "pageTitle": "Create Dataset",
+  "metadataTip": {
+    "title": "Metadata Tip",
+    "content": "After adding the dataset, click the Edit Dataset button to add more metadata."
+  },
+  "datasetForm": {
+    "title": "Title"
+  },
+  "datasetFormStates": {
+    "submitting": "Form Submitting",
+    "submissionSuccess": "Form submission successful"
+  },
+  "saveButton": "Save Dataset",
+  "cancelButton": "Cancel"
+}

src/Router.tsx

@@ -3,12 +3,15 @@ import { HelloDataverse } from './sections/hello-dataverse/HelloDataverse'
 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 CreateDatasetContainer from './views/create-dataset/CreateDatasetContainer'
 
 const router = createBrowserRouter(
   [
     {
       path: '/',
       element: <Layout />,
+      errorElement: <PageNotFound />,
       children: [
         {
           path: Route.HOME,
@@ -17,6 +20,10 @@ const router = createBrowserRouter(
         {
           path: `${Route.DATASETS}`,
           element: DatasetFactory.create()
+        },
+        {
+          path: `${Route.DATASETS}/${Route.CREATE}`,
+          element: <CreateDatasetContainer />
         }
       ]
     }

src/components/Forms/RequiredFieldText/RequiredFieldText.tsx

@@ -0,0 +1,10 @@
+import { RequiredInputSymbol } from '@iqss/dataverse-design-system'
+
+export function RequiredFieldText() {
+  return (
+    <p>
+      <RequiredInputSymbol />
+      Asterisks indicate required fields
+    </p>
+  )
+}

src/components/ui/SeparationLine/SeparationLine.module.scss

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

src/components/ui/SeparationLine/SeparationLine.tsx

@@ -0,0 +1,4 @@
+import styles from '/src/sections/dataset/Dataset.module.scss'
+export function SeparationLine() {
+  return <div className={styles['separation-line']}></div>
+}

src/sections/Route.enum.ts

@@ -3,5 +3,6 @@ export enum Route {
   SIGN_UP = '/dataverseuser.xhtml?editMode=CREATE&redirectPage=%2Fdataverse.xhtml',
   LOG_IN = '/loginpage.xhtml?redirectPage=%2Fdataverse.xhtml',
   LOG_OUT = '/',
-  DATASETS = 'datasets'
+  DATASETS = 'datasets',
+  CREATE = 'create'
 }

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 '../../components/ui/SeparationLine/SeparationLine'
 
 interface DatasetProps {
   fileRepository: FileRepository
@@ -92,7 +93,7 @@ export function Dataset({ fileRepository }: DatasetProps) {
                 </div>
               </Tabs.Tab>
             </Tabs>
-            <div className={styles['separation-line']}></div>
+            <SeparationLine />
           </div>
         </article>
       )}

src/sections/hello-dataverse/HelloDataverse.module.scss

@@ -1,5 +1,5 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
-@import "src/sections/assets/variables";
+@import "src/assets/variables";
 
 .container {
   display: flex;

src/sections/hello-dataverse/HelloDataverse.tsx

@@ -1,4 +1,4 @@
-import logo from '../assets/logo.svg'
+import logo from '../../assets/logo.svg'
 import styles from './HelloDataverse.module.scss'
 import { Trans, useTranslation } from 'react-i18next'
 

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/views/create-dataset/CreateDataset.tsx

@@ -0,0 +1,71 @@
+// components/FormPresenter.tsx
+
+import { ChangeEvent, FormEvent } from 'react'
+import { Alert, Button, Col, Form, Row } from '@iqss/dataverse-design-system'
+import { useTranslation } from 'react-i18next'
+import styles from '/src/sections/dataset/Dataset.module.scss'
+import { SeparationLine } from '../../components/ui/SeparationLine/SeparationLine'
+import { RequiredFieldText } from '../../components/Forms/RequiredFieldText/RequiredFieldText'
+
+/*
+ * TODO:
+ * out-of-scope: Find submit action source
+ * out-of-scope: Loading state management
+ */
+
+interface CreateDatasetFormPresenterProps {
+  formData: { createDatasetTitle: string }
+  handleCreateDatasetFieldChange: (event: ChangeEvent<HTMLInputElement>) => void
+  handleCreateDatasetSubmit: (event: FormEvent<HTMLFormElement>) => void
+  submitting: boolean
+  submitComplete: boolean
+}
+export default function CreateDatasetFormPresenter({
+  handleCreateDatasetFieldChange,
+  handleCreateDatasetSubmit,
+  submitting,
+  submitComplete
+}: CreateDatasetFormPresenterProps) {
+  const { t } = useTranslation('createDataset')
+  // TODO: Probably replace this with a FormSkeleton or remove entirely
+  // if (loading) {
+  //   return <DatasetSkeleton />
+  // }
+  return (
+    <article>
+      <header className={styles.header}>
+        <h1>{t('pageTitle')}</h1>
+      </header>
+      <SeparationLine />
+      <div className={styles.container}>
+        <RequiredFieldText />
+        <Form onSubmit={handleCreateDatasetSubmit} className={'create-dataset-form'}>
+          {submitComplete && <div>Form Submitted!</div>}
+          <Row>
+            <Col md={9}>
+              <Form.Group controlId="createDatasetTitle" required>
+                <Form.Group.Label>{t('datasetForm.title')}</Form.Group.Label>
+                <Form.Group.Input
+                  readOnly={submitting && true}
+                  type="text"
+                  name="createDatasetTitle"
+                  placeholder="Dataset Title"
+                  onChange={handleCreateDatasetFieldChange}
+                  withinMultipleFieldsGroup={false}
+                />
+              </Form.Group>
+            </Col>
+          </Row>
+          <SeparationLine />
+          <Alert variant={'info'} customHeading={t('metadataTip.title')} dismissible={false}>
+            {t('metadataTip.content')}
+          </Alert>
+          <Button type="submit">{t('saveButton')}</Button>
+          <Button withSpacing variant="secondary">
+            {t('cancelButton')}
+          </Button>
+        </Form>
+      </div>
+    </article>
+  )
+}

src/views/create-dataset/CreateDatasetContainer.tsx

@@ -0,0 +1,77 @@
+// containers/FormContainer.tsx
+
+import React, { useState, ChangeEvent, FormEvent } from 'react'
+import { FormInputElement } from '@iqss/dataverse-design-system/src/lib/components/form/form-group/form-element/FormInput'
+import CreateDatasetUseCase from './CreateDatasetUseCase'
+import CreateDatasetFormPresenter from './CreateDataset'
+
+const CreateDatasetContainer: React.FC = () => {
+  const [formData, setFormData] = useState({
+    createDatasetTitle: ''
+  })
+
+  const [submitComplete, setSubmitComplete] = useState(false)
+
+  const [submitting, setSubmitting] = useState(false)
+
+  const handleCreateDatasetFieldChange = (event: ChangeEvent<FormInputElement>): void => {
+    const { name, value } = event.target
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value
+    }))
+  }
+
+  const handleCreateDatasetSubmit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
+    event.preventDefault()
+
+    const formUseCase = new CreateDatasetUseCase()
+
+    console.log('handleCreateDatasetSubmit() formData | ', formData)
+
+    if (formUseCase.validateCreateDatasetFormData(formData)) {
+      try {
+        setSubmitting(true)
+        console.log('Status: Submitting | ', submitting)
+
+        // Simulate an asynchronous operation, e.g., API call
+        await new Promise((resolve) => setTimeout(resolve, 3000))
+        const result = await formUseCase.submitCreateDatasetFormData(formData)
+        console.log(result)
+        setSubmitComplete(true)
+        // Handle success, e.g., show a success message
+      } catch (error) {
+        console.error('Error submitting form:', error)
+        // Handle error, e.g., show an error message
+      } finally {
+        setSubmitting(false)
+      }
+    } else {
+      // Handle validation error, e.g., show validation messages
+      console.error('Form validation failed')
+    }
+    // Explicitly return a Promise<void>
+    return Promise.resolve()
+  }
+
+  return (
+    // TODO: conditional view, needs to be lower in the component heirarchy
+    // {submitting && <div>Submtting Form...</div>}
+    <>
+      {submitting && <p>Submitting...</p>}
+      {!submitting && (
+        <CreateDatasetFormPresenter
+          submitComplete={submitComplete}
+          formData={formData}
+          handleCreateDatasetFieldChange={handleCreateDatasetFieldChange}
+          // TODO: Fix using IIFE (Immediately-invoked Function Expression)
+          // eslint-disable-next-line @typescript-eslint/no-misused-promises
+          handleCreateDatasetSubmit={handleCreateDatasetSubmit}
+          submitting={submitting}
+        />
+      )}
+    </>
+  )
+}
+
+export default CreateDatasetContainer

src/views/create-dataset/CreateDatasetUseCase.tsx

@@ -0,0 +1,23 @@
+// usecases/FormUseCase.js
+
+'use strict'
+
+interface CreateDatasetFormData {
+  createDatasetTitle: string
+}
+
+class CreateDatasetUseCase {
+  validateCreateDatasetFormData(formData: CreateDatasetFormData): boolean {
+    // Add your validation logic here
+    // For simplicity, assuming all fields are required
+    return formData.createDatasetTitle !== undefined && formData.createDatasetTitle.trim() !== ''
+  }
+
+  async submitCreateDatasetFormData(_formData: CreateDatasetFormData): Promise<string> {
+    // Add your business logic for form submission here
+    // For simplicity, returning a success message
+    return Promise.resolve('Form submitted successfully!')
+  }
+}
+
+export default CreateDatasetUseCase

tests/component/views/create-dataset/CreateDataset.spec.tsx

@@ -0,0 +1,22 @@
+import CreateDatasetContainer from '../../../../src/views/create-dataset/CreateDatasetContainer'
+
+describe('Form component', () => {
+  beforeEach(() => {
+    cy.customMount(<CreateDatasetContainer />)
+  })
+  it('can submit a valid form', () => {
+    cy.findByText(/Create Dataset/i).should('exist')
+    cy.findByText(/Title/i).should('exist')
+
+    cy.get('input[name="createDatasetTitle"]')
+      .should('exist')
+      .type('Test Dataset Title')
+      .should('have.attr', 'required', 'required')
+      .and('have.value', 'Test Dataset Title')
+    cy.findByText(/Save Dataset/i).should('exist')
+    cy.findByText(/Cancel/i).should('exist')
+    cy.log('Submit form')
+    cy.findByText(/Save Dataset/i).click()
+    cy.findByText('Form Submitted!', { timeout: 5000 })
+  })
+})