Feature/231 create dataset boilerplate

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

@@ -1,14 +1,17 @@
-import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { createBrowserRouter, RouterProvider, useRouteError } from 'react-router-dom'
 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 { CreateDataset } from './views/create-dataset/CreateDataset'
 
 const router = createBrowserRouter(
   [
     {
       path: '/',
       element: <Layout />,
+      errorElement: <PageNotFound />,
       children: [
         {
           path: Route.HOME,
@@ -17,13 +20,25 @@
         {
           path: `${Route.DATASETS}`,
           element: DatasetFactory.create()
+        },
+        {
+          path: `${Route.CREATE}`,
+          element: <CreateDataset />
         }
       ]
     }
   ],
   { basename: import.meta.env.BASE_URL }
 )
 
+// Just a quick test for ensuring errorElements work correctly.
+function ErrorBoundary() {
+  const error = useRouteError()
+  console.error(error)
+  // Uncaught ReferenceError: path is not defined
+  return <div>Dang!</div>
+}
+
 export function Router() {
   return <RouterProvider router={router} />
 }

src/components/Forms/RequiredFieldText/RequiredFieldText.tsx

@@ -0,0 +1,20 @@
+export function RequiredFieldText() {
+  return (
+    <p>
+      <RequiredInputSymbol />
+      Asterisks indicate required fields
+    </p>
+  )
+}
+
+// TODO: Why can't I export this object from Storybook?
+// Needed to duplicate it on the frontend to be able to use.
+
+const RequiredInputSymbol = () => {
+  return (
+    <span role="img" aria-label="Required input symbol" style={{ color: '#a94442' }}>
+      {' '}
+      *
+    </span>
+  )
+}

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/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,119 @@
+import { ChangeEvent, FormEvent, useEffect, useState } from 'react'
+import { Alert, Button, Col, Form, Row } from '@iqss/dataverse-design-system'
+import { useTranslation } from 'react-i18next'
+import { useDataset } from '../../sections/dataset/DatasetContext'
+import { DatasetSkeleton } from '../../sections/dataset/DatasetSkeleton'
+import { useLoading } from '../../sections/loading/LoadingContext'
+import styles from '/src/sections/dataset/Dataset.module.scss'
+import { FormInputElement } from '@iqss/dataverse-design-system/src/lib/components/form/form-group/form-element/FormInput'
+import { SeparationLine } from '../../components/ui/SeparationLine/SeparationLine'
+import { RequiredFieldText } from '../../components/Forms/RequiredFieldText/RequiredFieldText'
+
+/*
+ * TODO:
+ * Break out different components
+ * Find submit action source
+ * cleanup state objects and submit process
+ * show submitted info in console
+ */
+
+// See comments about https://rjsf-team.github.io/react-jsonschema-form/
+// https://github.com/IQSS/dataverse-frontend/issues/231
+
+export function CreateDataset() {
+  const { setIsLoading } = useLoading()
+  const { isLoading } = useDataset()
+  const { t } = useTranslation('createDataset')
+  const [submitting, setSubmitting] = useState(false)
+  const [submitStatus, setSubmitStatus] = useState(false)
+
+  useEffect(() => {
+    setIsLoading(isLoading)
+  }, [isLoading])
+
+  const [state, setState] = useState({
+    createDatasetTitle: ''
+  })
+
+  const handleCreateDatasetFieldChange = (e: ChangeEvent<FormInputElement>) => {
+    let value: (typeof state)[keyof typeof state] = e.target.value
+    if (e.target.type === 'text') {
+      value = e.target.value
+    }
+
+    setState({ ...state, [e.target.id]: value })
+  }
+
+  // TODO: Connect to API when ready
+  const handleCreateDatasetSubmit = (event: FormEvent<HTMLFormElement>) => {
+    setSubmitting(true)
+    event.preventDefault()
+    setTimeout(() => {
+      setSubmitting(false)
+      console.log('Form Submitted!')
+      setSubmitStatus(true)
+    }, 3000)
+    console.log(state)
+    // TODO: Callback for form submission should be here.
+  }
+
+  // TODO: Probably replace this with a FormSkeleton or remove entirely
+  if (isLoading) {
+    return <DatasetSkeleton />
+  }
+  return (
+    <article>
+      <header className={styles.header}>
+        <h1>{t('pageTitle')}</h1>
+      </header>
+      <SeparationLine />
+      <div className={styles.container}>
+        <RequiredFieldText />
+        {submitting && <div>Submtting Form...</div>}
+        <Form onSubmit={handleCreateDatasetSubmit}>
+          {submitStatus && <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
+                  data-cy="datasetFormInputTitle"
+                  type="text"
+                  placeholder="Dataset Title"
+                  onChange={handleCreateDatasetFieldChange}
+                />
+              </Form.Group>
+            </Col>
+          </Row>
+          <SeparationLine />
+          <Alert
+            key={1}
+            variant={'info'}
+            customHeading={t('metadataTip.title')}
+            dismissible={false}>
+            {t('metadataTip.content')}
+          </Alert>
+          {/* SRC: https://github.com/IQSS/dataverse/blob/develop/src/main/webapp/dataset.xhtml */}
+          {/* <p:commandButton id="saveBottom" styleClass="btn btn-default" value="#{DatasetPage.editMode == 'CREATE' ? bundle['file.addBtn'] : bundle.saveChanges}" rendered="#{DatasetPage.editMode == 'CREATE' or DatasetPage.editMode == 'METADATA'}"
+              onclick="PF('blockDatasetForm').show();"
+              update=":datasetForm,:messagePanel"
+              oncomplete="$(document).scrollTop(0);"
+              action="#{DatasetPage.save}"
+              /> */}
+          {/* Where is datasetSaveCommand()  */}
+          {/* <p:remoteCommand
+            name="datasetSaveCommand"
+            action="#{DatasetPage.save()}"
+            update=":datasetForm,:messagePanel"
+          /> */}
+          <Button type="submit" data-cy="datasetFormSubmit">
+            {t('saveButton')}
+          </Button>
+          <Button withSpacing variant="secondary" data-cy="datasetFormCancel">
+            {t('cancelButton')}
+          </Button>
+        </Form>
+      </div>
+    </article>
+  )
+}

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

@@ -0,0 +1,24 @@
+import { CreateDataset } from '../../../../src/views/create-dataset/CreateDataset'
+
+describe('Form component', () => {
+  it('should render all form fields', () => {
+    cy.customMount(<CreateDataset />)
+    cy.get('[data-cy=datasetFormInputTitle]').should('be.visible')
+    cy.get('[data-cy=datasetFormSubmit]').should('be.visible')
+    cy.get('[data-cy=datasetFormCancel]').should('be.visible')
+  })
+
+  it('should submit the form with correct values', () => {
+    cy.customMount(<CreateDataset />)
+
+    cy.get('[data-cy=datasetFormInputTitle]').type('Test Dataset Title')
+
+    cy.get('[data-cy=datasetFormSubmit]').click()
+
+    // Wait for the form submission to complete (adjust the timeout as needed)
+    cy.wait(4000)
+
+    // Assert that the form was successfully submitted
+    cy.contains('Form Submitted!')
+  })
+})