fixed suggested items from code review. Added better component tests

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/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'

src/components/Forms/RequiredFieldText/RequiredFieldText.tsx

@@ -1,3 +1,5 @@
+import { RequiredInputSymbol } from '@iqss/dataverse-design-system'
+
 export function RequiredFieldText() {
   return (
     <p>
@@ -6,15 +8,3 @@ export function RequiredFieldText() {
     </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.module.scss

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

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

@@ -3,28 +3,16 @@
 import { ChangeEvent, FormEvent } from 'react'
 import { Alert, Button, Col, Form, Row } from '@iqss/dataverse-design-system'
 import { useTranslation } from 'react-i18next'
-// 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
- * Loading state management
+ * out-of-scope: Find submit action source
+ * out-of-scope: Loading state management
  */
 
-// See comments about https://rjsf-team.github.io/react-jsonschema-form/
-// https://github.com/IQSS/dataverse-frontend/issues/231
-
-// const [submitting, setSubmitting] = useState(false)
-// const [submitStatus, setSubmitStatus] = useState(false)
-
 interface CreateDatasetFormPresenterProps {
   formData: { createDatasetTitle: string }
   handleCreateDatasetFieldChange: (event: ChangeEvent<HTMLInputElement>) => void
@@ -33,7 +21,6 @@ interface CreateDatasetFormPresenterProps {
   submitComplete: boolean
 }
 export default function CreateDatasetFormPresenter({
-  // formData,
   handleCreateDatasetFieldChange,
   handleCreateDatasetSubmit,
   submitting,
@@ -50,9 +37,9 @@ export default function CreateDatasetFormPresenter({
         <h1>{t('pageTitle')}</h1>
       </header>
       <SeparationLine />
-      <div className={styles.container}>
+      <div className={styles.container} id="foo">
         <RequiredFieldText />
-        <Form onSubmit={handleCreateDatasetSubmit}>
+        <Form onSubmit={handleCreateDatasetSubmit} className={'create-dataset-form'}>
           {submitComplete && <div>Form Submitted!</div>}
           <Row>
             <Col md={9}>
@@ -72,26 +59,9 @@ export default function CreateDatasetFormPresenter({
             </Col>
           </Row>
           <SeparationLine />
-          <Alert
-            key={1}
-            variant={'info'}
-            customHeading={t('metadataTip.title')}
-            dismissible={false}>
+          <Alert 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>
@@ -103,5 +73,3 @@ export default function CreateDatasetFormPresenter({
     </article>
   )
 }
-
-// export default CreateDatasetFormPresenter

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

@@ -1,24 +1,22 @@
 import CreateDatasetContainer from '../../../../src/views/create-dataset/CreateDatasetContainer'
 
 describe('Form component', () => {
-  it('should render all form fields', () => {
+  beforeEach(() => {
     cy.customMount(<CreateDatasetContainer />)
-    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('can submit a valid form', () => {
+    cy.findByText(/Create Dataset/i).should('exist')
+    cy.findByText(/Title/i).should('exist')
 
-  it('should submit the form with correct values', () => {
-    cy.customMount(<CreateDatasetContainer />)
-
-    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!')
+    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 })
   })
 })