Feat/406 add edit dataset metadata form

.storybook/preview.tsx

@@ -2,6 +2,7 @@ import type { Preview } from '@storybook/react'
 import { ThemeProvider } from '@iqss/dataverse-design-system'
 import { MemoryRouter } from 'react-router-dom'
 import { FakerHelper } from '../tests/component/shared/FakerHelper'
+import 'react-loading-skeleton/dist/skeleton.css'
 
 const preview: Preview = {
   parameters: {

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-pr141.153a56a",
+    "@iqss/dataverse-client-javascript": "2.0.0-pr155.be01a3f",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",
@@ -38,7 +38,7 @@
     "react-infinite-scroll-hook": "4.1.1",
     "react-loader-spinner": "5.3.4",
     "react-markdown": "8.0.7",
-    "react-router-dom": "6.8.1",
+    "react-router-dom": "6.23.1",
     "react-topbar-progress-indicator": "4.1.1",
     "sass": "1.58.1",
     "typescript": "4.9.5",

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

@@ -5,17 +5,19 @@ import * as React from 'react'
 
 export interface FormSelectProps
   extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  value?: string
   isInvalid?: boolean
   isValid?: boolean
   disabled?: boolean
 }
 
 export const FormSelect = React.forwardRef(function FormSelect(
-  { isInvalid, isValid, disabled, children, ...props }: PropsWithChildren<FormSelectProps>,
+  { value, isInvalid, isValid, disabled, children, ...props }: PropsWithChildren<FormSelectProps>,
   ref
 ) {
   return (
     <FormBS.Select
+      value={value}
       isInvalid={isInvalid}
       isValid={isValid}
       disabled={disabled}

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

@@ -7,10 +7,11 @@ export interface FormTextAreaProps extends Omit<React.HTMLAttributes<FormInputEl
   disabled?: boolean
   isValid?: boolean
   isInvalid?: boolean
+  value?: string
 }
 
 export const FormTextArea = React.forwardRef(function FormTextArea(
-  { name, disabled, isValid, isInvalid, ...props }: FormTextAreaProps,
+  { name, disabled, isValid, isInvalid, value, ...props }: FormTextAreaProps,
   ref
 ) {
   return (
@@ -21,6 +22,7 @@ export const FormTextArea = React.forwardRef(function FormTextArea(
       name={name}
       isValid={isValid}
       isInvalid={isInvalid}
+      value={value}
       ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
       {...props}
     />

public/locales/en/createDataset.json

@@ -1,43 +1,9 @@
 {
   "pageTitle": "Create Dataset",
-  "metadataTip": {
-    "title": "Metadata Tip",
-    "content": "After adding the dataset, click the Edit Dataset button to add more metadata."
-  },
   "hostCollection": {
     "label": "Host Collection",
     "description": "The collection which contains this data.",
     "helpText": "Changing the host collection will clear any fields you may have entered data into.",
     "buttonLabel": "Edit Host Collection"
-  },
-  "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": {
-    "field": {
-      "required": "{{displayName}} is required",
-      "invalid": {
-        "url": "{{displayName}} is not a valid URL",
-        "email": "{{displayName}} is not a valid email",
-        "int": "{{displayName}} is not a valid integer",
-        "float": "{{displayName}} is not a valid float",
-        "date": "{{displayName}} is not a valid date. Please use the format {{dateFormat}}"
-      }
-    },
-    "status": {
-      "submitting": "Submitting...",
-      "success": "Form submitted successfully!",
-      "failed": "Error: Submission failed."
-    },
-    "addRowButton": "Add",
-    "deleteRowButton": "Delete"
-  },
-  "datasetFormStates": {
-    "submitting": "Form Submitting",
-    "submissionSuccess": "Form submission successful"
-  },
-  "saveButton": "Save Dataset",
-  "cancelButton": "Cancel"
+  }
 }

public/locales/en/datasetMetadataForm.json

@@ -0,0 +1,38 @@
+{
+  "metadataTip": {
+    "title": "Metadata Tip",
+    "content": "After adding the dataset, click the Edit Dataset button to add more metadata."
+  },
+  "validationAlert": {
+    "title": "Validation Error",
+    "content": "Required fields were missed or there was a validation error. Please scroll down to see details."
+  },
+  "requiredFields": "Asterisks indicate required fields",
+  "mayBecomeRequired": "One or more of these fields may become required if you add to one or more of these optional fields.",
+  "field": {
+    "required": "{{displayName}} is required",
+    "invalid": {
+      "url": "{{displayName}} is not a valid URL",
+      "email": "{{displayName}} is not a valid email",
+      "int": "{{displayName}} is not a valid integer",
+      "float": "{{displayName}} is not a valid float",
+      "date": "{{displayName}} is not a valid date. Please use the format {{dateFormat}}"
+    }
+  },
+  "status": {
+    "submitting": "Submitting...",
+    "success": "Form submitted successfully!",
+    "failed": "Error: Submission failed."
+  },
+  "states": {
+    "submitting": "Form Submitting",
+    "submissionSuccess": "Form submission successful"
+  },
+  "addRowButton": "Add",
+  "deleteRowButton": "Delete",
+  "saveButton": {
+    "createMode": "Save Dataset",
+    "editMode": "Save Changes"
+  },
+  "cancelButton": "Cancel"
+}

public/locales/en/editDatasetMetadata.json

@@ -0,0 +1,12 @@
+{
+  "breadcrumbActionItem": "Edit Dataset Metadata",
+  "infoAlert": {
+    "heading": "Edit Dataset Metadata",
+    "text": "Add more metadata about this dataset to help others easily find it."
+  },
+  "hostCollection": {
+    "label": "Host Collection",
+    "description": "The collection which contains this data."
+  },
+  "metadata": "Metadata"
+}

src/App.tsx

@@ -4,6 +4,7 @@ import { SessionProvider } from './sections/session/SessionProvider'
 import { UserJSDataverseRepository } from './users/infrastructure/repositories/UserJSDataverseRepository'
 import { DataverseApiAuthMechanism } from '@iqss/dataverse-client-javascript/dist/core/infra/repositories/ApiConfig'
 import { BASE_URL } from './config'
+import 'react-loading-skeleton/dist/skeleton.css'
 
 if (BASE_URL === '') {
   throw Error('VITE_DATAVERSE_BACKEND_URL environment variable should be specified.')

src/Router.tsx

@@ -7,6 +7,7 @@ import { CreateDatasetFactory } from './sections/create-dataset/CreateDatasetFac
 import { FileFactory } from './sections/file/FileFactory'
 import { CollectionFactory } from './sections/collection/CollectionFactory'
 import { UploadDatasetFilesFactory } from './sections/upload-dataset-files/UploadDatasetFilesFactory'
+import { EditDatasetMetadataFactory } from './sections/edit-dataset-metadata/EditDatasetMetadataFactory'
 import { DatasetNonNumericVersion } from './dataset/domain/models/Dataset'
 
 const router = createBrowserRouter(
@@ -36,6 +37,10 @@ const router = createBrowserRouter(
           path: Route.UPLOAD_DATASET_FILES,
           element: UploadDatasetFilesFactory.create()
         },
+        {
+          path: Route.EDIT_DATASET_METADATA,
+          element: EditDatasetMetadataFactory.create()
+        },
         {
           path: Route.FILES,
           element: FileFactory.create()

src/dataset/domain/repositories/DatasetRepository.ts

@@ -7,6 +7,7 @@ export interface DatasetRepository {
   getByPersistentId: (persistentId: string, version?: string) => Promise<Dataset | undefined>
   getByPrivateUrlToken: (privateUrlToken: string) => Promise<Dataset | undefined>
   create: (dataset: DatasetDTO, collectionId?: string) => Promise<{ persistentId: string }>
+  updateMetadata: (datasetId: string | number, datasetDTO: DatasetDTO) => Promise<void>
   getAllWithCount: (
     collectionId: string,
     paginationInfo: DatasetPaginationInfo

src/dataset/domain/useCases/updateDatasetMetadata.ts

@@ -0,0 +1,12 @@
+import { DatasetRepository } from '../repositories/DatasetRepository'
+import { DatasetDTO } from './DTOs/DatasetDTO'
+
+export function updateDatasetMetadata(
+  datasetRepository: DatasetRepository,
+  datasetId: string | number,
+  updatedDataset: DatasetDTO
+): Promise<void> {
+  return datasetRepository.updateMetadata(datasetId, updatedDataset).catch((error: Error) => {
+    throw new Error(error.message)
+  })
+}

src/dataset/infrastructure/mappers/DatasetDTOMapper.ts

@@ -1,7 +1,7 @@
 import { DatasetDTO } from '../../domain/useCases/DTOs/DatasetDTO'
 import {
-  NewDataset as JSDatasetDTO,
-  NewDatasetMetadataBlockValues as JSMetadataBlocksDTO
+  DatasetDTO as JSDatasetDTO,
+  DatasetMetadataBlockValuesDTO as JSMetadataBlocksDTO
 } from '@iqss/dataverse-client-javascript'
 
 export class DatasetDTOMapper {

src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts

@@ -19,7 +19,8 @@ import {
   DatasetPreviewSubset,
   createDataset,
   CreatedDatasetIdentifiers as JSDatasetIdentifiers,
-  WriteError
+  WriteError,
+  updateDataset
 } from '@iqss/dataverse-client-javascript'
 import { JSDatasetMapper } from '../mappers/JSDatasetMapper'
 import { DatasetPaginationInfo } from '../../domain/models/DatasetPaginationInfo'
@@ -193,4 +194,12 @@ export class DatasetJSDataverseRepository implements DatasetRepository {
         throw new Error(error.message)
       })
   }
+
+  updateMetadata(datasetId: string | number, updatedDataset: DatasetDTO): Promise<void> {
+    return updateDataset
+      .execute(datasetId, DatasetDTOMapper.toJSDatasetDTO(updatedDataset))
+      .catch((error: WriteError) => {
+        throw new Error(error.message)
+      })
+  }
 }

src/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import reportWebVitals from './reportWebVitals'
 import './i18n'
 import { LoadingProvider } from './sections/loading/LoadingProvider'
 import { ThemeProvider } from '@iqss/dataverse-design-system'
@@ -18,8 +17,3 @@ root.render(
     </React.Suspense>
   </React.StrictMode>
 )
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals(console.log)