Fixed missing notification on cloud storage creation page when manifest file is required

cvat-ui/src/components/create-cloud-storage-page/cloud-storage-form.tsx

@@ -203,10 +203,8 @@ export default function CreateCloudStorageForm(props: Props): JSX.Element {
         }
     }, []);
 
-    const onSubmit = async (): Promise<void> => {
-        let cloudStorageData: Record<string, any> = {};
-        const formValues = await form.validateFields();
-        cloudStorageData = { ...formValues };
+    const handleOnFinish = (formValues: CloudStorageForm): void => {
+        const cloudStorageData: Record<string, any> = { ...formValues };
         // specific attributes
         const specificAttributes = new URLSearchParams();
 
@@ -269,6 +267,20 @@ export default function CreateCloudStorageForm(props: Props): JSX.Element {
         }
     };
 
+    const handleOnFinishFailed = (
+        { errorFields }: { errorFields: any[] },
+    ): void => {
+        const [manifestsErrors] = errorFields.filter((value) => value.name[0] === 'manifests');
+        if (manifestsErrors) {
+            const msg = manifestsErrors.errors.join('; ');
+            notification.error({
+                message: 'Could not attach a cloud storage',
+                description: msg,
+                className: 'cvat-notification-attach-cloud-storage',
+            });
+        }
+    };
+
     const resetCredentialsValues = (): void => {
         form.setFieldsValue({
             key: undefined,
@@ -607,7 +619,13 @@ export default function CreateCloudStorageForm(props: Props): JSX.Element {
     };
 
     return (
-        <Form className='cvat-cloud-storage-form' layout='vertical' form={form}>
+        <Form
+            className='cvat-cloud-storage-form'
+            layout='vertical'
+            form={form}
+            onFinish={(values: CloudStorageForm): void => handleOnFinish(values)}
+            onFinishFailed={(values: any): void => handleOnFinishFailed(values)}
+        >
             <Form.Item
                 {...commonProps}
                 label='Display name'
@@ -672,7 +690,6 @@ export default function CreateCloudStorageForm(props: Props): JSX.Element {
                     <Button
                         type='primary'
                         htmlType='submit'
-                        onClick={onSubmit}
                         className='cvat-cloud-storage-submit-button'
                         loading={loading}
                         disabled={loading}

cvat-ui/src/components/create-cloud-storage-page/manifests-manager.tsx

@@ -70,7 +70,6 @@ export default function ManifestsManager(props: Props): JSX.Element {
     return (
         <>
             <Form.Item
-                name='manifests'
                 className='cvat-manifests-manager-form-item'
                 label={(
                     <>
@@ -87,9 +86,21 @@ export default function ManifestsManager(props: Props): JSX.Element {
                         </Tooltip>
                     </>
                 )}
-                rules={[{ required: true, message: 'Please, specify at least one manifest file' }]}
+                required
             />
-            <Form.List name='manifests'>
+            <Form.List
+                name='manifests'
+                rules={[
+                    {
+                        validator: async (_, names) => {
+                            if (!names || !names.length) {
+                                return Promise.reject(new Error('Please, specify at least one manifest file'));
+                            }
+                            return Promise.resolve();
+                        },
+                    },
+                ]}
+            >
                 {
                     (fields) => (
                         <>