Links and Docs - forgotten commit with Validation

src/main/topLevelPages/myDashboard/newVirtualContributorWizard/AddContent/AddContentForm.tsx

@@ -6,7 +6,7 @@ import { Box, Button, Tooltip } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import { gutters } from '@/core/ui/grid/utils';
 import { LoadingButton } from '@mui/lab';
-import { LONG_MARKDOWN_TEXT_LENGTH, SMALL_TEXT_LENGTH } from '@/core/ui/forms/field-length.constants';
+import { LONG_MARKDOWN_TEXT_LENGTH, MID_TEXT_LENGTH, SMALL_TEXT_LENGTH } from '@/core/ui/forms/field-length.constants';
 import { Actions } from '@/core/ui/actions/Actions';
 import { MessageWithPayload } from '@/domain/shared/i18n/ValidationMessageTranslation';
 import MarkdownValidator from '@/core/ui/forms/MarkdownInput/MarkdownValidator';
@@ -51,6 +51,19 @@ export const AddContentForm = ({
         })
       )
       .min(1, MessageWithPayload('forms.validations.minLength')),
+    documents: yup.array().of(
+      yup.object().shape({
+        name: yup
+          .string()
+          .min(3, MessageWithPayload('forms.validations.minLength'))
+          .max(SMALL_TEXT_LENGTH, MessageWithPayload('forms.validations.maxLength'))
+          .required(MessageWithPayload('forms.validations.requiredField')),
+        url: yup
+          .string()
+          .required(MessageWithPayload('forms.validations.requiredField'))
+          .max(MID_TEXT_LENGTH, MessageWithPayload('forms.validations.maxLength')),
+      })
+    ),
   });
 
   const initialValues: BoKCalloutsFormValues = {
@@ -69,7 +82,7 @@ export const AddContentForm = ({
   };
 
   return (
-    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={onSubmit}>
+    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={onSubmit} validateOnMount>
       {({ values: { posts, documents }, isValid, setFieldValue }) => {
         const moreThanOnePost = posts.length > 1;
         const maxPostsReached = posts.length >= MAX_POSTS;
@@ -138,7 +151,13 @@ export const AddContentForm = ({
               />
             </Caption>
             {documents?.map((document, index) => (
-              <DocumentItem key={index} document={document} index={index} onDelete={handleDeleteDocument} />
+              <DocumentItem
+                key={index}
+                document={document}
+                index={index}
+                onDelete={handleDeleteDocument}
+                onChange={fileName => setFieldValue(`documents[${index}].name`, fileName)}
+              />
             ))}
             <Tooltip title={t('createVirtualContributorWizard.addContent.documents.addAnother')} placement={'bottom'}>
               <Box>

src/main/topLevelPages/myDashboard/newVirtualContributorWizard/AddContent/DocumentItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ChangeEventHandler } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Box, Tooltip, IconButton, Theme, useMediaQuery, Link } from '@mui/material';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -8,14 +8,16 @@ import { DocumentValues } from './AddContentProps';
 import FormikFileInput from '@/core/ui/forms/FormikFileInput/FormikFileInput';
 import { useConfig } from '@/domain/platform/config/useConfig';
 import { TranslateWithElements } from '@/domain/shared/i18n/TranslateWithElements';
+import { noop } from 'lodash';
 
 interface DocumentItemProps {
   document: DocumentValues;
   index: number;
   onDelete: (index: number) => void;
+  onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> & ((fileName: string) => void);
 }
 
-export const DocumentItem = ({ document, index, onDelete }: DocumentItemProps) => {
+export const DocumentItem = ({ document, index, onDelete, onChange = noop }: DocumentItemProps) => {
   const { t } = useTranslation();
   const { locations } = useConfig();
   const tLinks = TranslateWithElements(<Link target="_blank" />);
@@ -29,11 +31,13 @@ export const DocumentItem = ({ document, index, onDelete }: DocumentItemProps) =
         title={t('createVirtualContributorWizard.addContent.documents.referenceTitle')}
         fullWidth={isMobile}
         value={document.name}
+        required
       />
       <Box flexGrow={1} width={isMobile ? '100%' : undefined}>
         <Box display="flex">
           <FormikFileInput
             name={`documents[${index}].url`}
+            required
             title={t('createVirtualContributorWizard.addContent.documents.referenceUrl')}
             fullWidth
             helperText={tLinks('components.referenceSegment.url-helper-text', {
@@ -42,6 +46,7 @@ export const DocumentItem = ({ document, index, onDelete }: DocumentItemProps) =
                 'aria-label': t('components.referenceSegment.plaintext-helper-text'),
               },
             })}
+            onChange={onChange}
             temporaryLocation
           />
           <Box>

src/main/topLevelPages/myDashboard/newVirtualContributorWizard/useNewVirtualContributorWizard.tsx

@@ -454,6 +454,7 @@ const useNewVirtualContributorWizard = (): useNewVirtualContributorWizardProvide
       // add posts to collection
       if (postCalloutId) {
         const postsArray = calloutData?.posts ?? [];
+
         for (const post of postsArray) {
           await onCreatePost(post, postCalloutId);
         }
@@ -469,6 +470,7 @@ const useNewVirtualContributorWizard = (): useNewVirtualContributorWizardProvide
       // add documents to collection
       if (documentsCalloutId) {
         const documentsArray = calloutData?.documents ?? [];
+
         for (const document of documentsArray) {
           await onCreateLink(document, documentsCalloutId);
         }