feat: default values and not found page

src/sections/new-collection/NewCollection.tsx

@@ -8,6 +8,7 @@ import { RequiredFieldText } from '../shared/form/RequiredFieldText/RequiredFiel
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
 import { CollectionForm, CollectionFormData } from './collection-form'
 import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
+import { PageNotFound } from '../page-not-found/PageNotFound'
 
 interface NewCollectionProps {
   ownerCollectionId: string
@@ -24,29 +25,26 @@ export function NewCollection({ ownerCollectionId, collectionRepository }: NewCo
     ownerCollectionId
   )
 
-  // TODO:ME If is not loading and collection is not found, show a message and navigate to the root collection
-  // One good thing would be add toastify to show messages on top of the page for this kind of things
-
   useEffect(() => {
     if (!isLoadingCollection) {
       setIsLoading(false)
     }
   }, [isLoading, isLoadingCollection, setIsLoading])
 
   if (!isLoading && !collection) {
-    return <p>Owner Collection not found</p>
+    return <PageNotFound />
   }
 
   // TODO:ME Create Skeleton
   if (isLoading || !collection) {
     return <p>Loading...</p>
   }
-  // TODO:ME name = user name, affiliation = user affiliation, first email = user email
-  const formDefaultValues: Partial<CollectionFormData> = {
+
+  const formDefaultValues: CollectionFormData = {
     hostCollection: collection.name,
     name: user?.displayName ? `${user?.displayName} Collection` : '',
     alias: '',
-    type: undefined,
+    type: '',
     contacts: [{ value: user?.email ?? '' }],
     affiliation: user?.affiliation ?? '',
     storage: 'Local (Default)',

src/sections/new-collection/NewCollectionFactory.tsx

@@ -14,7 +14,6 @@ export class NewCollectionFactory {
 function NewCollectionWithParams() {
   const { ownerCollectionId = 'root' } = useParams<{ ownerCollectionId: string }>()
 
-  // TODO:ME Maybe assert that collection with ownerCollectionId exists first, could be root or a specific collection
   // TODO:ME What roles can create a collection, what checks to do?
 
   return (

src/sections/new-collection/collection-form/index.tsx

@@ -17,19 +17,23 @@ import styles from './CollectionForm.module.scss'
 
 export interface CollectionFormProps {
   collectionRepository: CollectionRepository
-  defaultValues: Partial<CollectionFormData>
+  defaultValues: CollectionFormData
 }
 
 export type CollectionFormData = {
   hostCollection: string
   name: string
-  affiliation?: string
+  affiliation: string
   alias: string
-  storage?: CollectionStorage
-  type: CollectionType
-  description?: string
+  storage: CollectionStorage
+  type: CollectionType | ''
+  description: string
   contacts: { value: string }[]
 }
+// On the submit function callback, type is CollectionType as type field is required and wont never be ""
+export type CollectionFormValuesOnSubmit = Omit<CollectionFormData, 'type'> & {
+  type: CollectionType
+}
 
 export const CollectionForm = ({ collectionRepository, defaultValues }: CollectionFormProps) => {
   const formContainerRef = useRef<HTMLDivElement>(null)
@@ -110,10 +114,7 @@ export const CollectionForm = ({ collectionRepository, defaultValues }: Collecti
           </Stack>
 
           <Stack direction="horizontal" className="pt-3">
-            <Button
-              type="submit"
-              // disabled={disableSubmitButton}
-            >
+            <Button type="submit" disabled={disableSubmitButton}>
               {t('formButtons.save')}
             </Button>
             <Button

src/sections/new-collection/collection-form/useSubmitCollection.ts

@@ -4,7 +4,7 @@ import { WriteError } from '@iqss/dataverse-client-javascript'
 import { createCollection } from '../../../collection/domain/useCases/createCollection'
 import { CollectionRepository } from '../../../collection/domain/repositories/CollectionRepository'
 import { CollectionDTO } from '../../../collection/domain/useCases/DTOs/CollectionDTO'
-import { CollectionFormData } from '.'
+import { CollectionFormData, CollectionFormValuesOnSubmit } from '.'
 import { Route } from '../../Route.enum'
 import { JSDataverseWriteErrorHandler } from '../../../shared/helpers/JSDataverseWriteErrorHandler'
 
@@ -41,7 +41,7 @@ export function useSubmitCollection(
   )
   const [submitError, setSubmitError] = useState<string | null>(null)
 
-  const submitForm = (formData: CollectionFormData): void => {
+  const submitForm = (formData: CollectionFormValuesOnSubmit): void => {
     setSubmissionStatus(SubmissionStatus.IsSubmitting)
 
     const newCollection: CollectionDTO = {