Fixed missing notification on cloud storage creation page when manifest file is required (#4921)

CHANGELOG.md

@@ -62,6 +62,7 @@ Skeleton (<https://github.com/cvat-ai/cvat/pull/1>), (<https://github.com/opencv
 - Maximum callstack exceed when create task with 100000+ files from cloud storage (<https://github.com/opencv/cvat/pull/4836>)
 - Fixed invocation of serverless functions (<https://github.com/opencv/cvat/pull/4907>)
 - Removing label attributes (<https://github.com/opencv/cvat/pull/4927>)
+- Notification with a required manifest file (<https://github.com/opencv/cvat/pull/4921>)
 
 ### Security
 - TDB

cvat-ui/package.json

 {
   "name": "cvat-ui",
-  "version": "1.41.4",
+  "version": "1.41.5",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

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();
 
@@ -607,7 +605,12 @@ 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)}
+        >
             <Form.Item
                 {...commonProps}
                 label='Display name'
@@ -672,7 +675,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

@@ -6,11 +6,13 @@ import React, { useEffect, useRef, useState } from 'react';
 import { DeleteOutlined, PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import Button from 'antd/lib/button';
 import Col from 'antd/lib/col';
-import Form from 'antd/lib/form';
+import Form, { RuleObject } from 'antd/lib/form';
+import { FormListFieldData, FormListOperation } from 'antd/lib/form/FormList';
 import Input from 'antd/lib/input';
 import Row from 'antd/lib/row';
 import notification from 'antd/lib/notification';
 import Tooltip from 'antd/lib/tooltip';
+import consts from 'consts';
 
 interface Props {
     form: any;
@@ -22,6 +24,7 @@ export default function ManifestsManager(props: Props): JSX.Element {
     const { form, manifestNames, setManifestNames } = props;
     const maxManifestsCount = useRef(5);
     const [limitingAddingManifestNotification, setLimitingAddingManifestNotification] = useState(false);
+    const { DATASET_MANIFEST_GUIDE_URL } = consts;
 
     const updateManifestFields = (): void => {
         const newManifestFormItems = manifestNames.map((name, idx) => ({
@@ -70,7 +73,6 @@ export default function ManifestsManager(props: Props): JSX.Element {
     return (
         <>
             <Form.Item
-                name='manifests'
                 className='cvat-manifests-manager-form-item'
                 label={(
                     <>
@@ -80,18 +82,29 @@ export default function ManifestsManager(props: Props): JSX.Element {
                                 type='link'
                                 target='_blank'
                                 className='cvat-cloud-storage-help-button'
-                                href='https://opencv.github.io/cvat/docs/manual/advanced/dataset_manifest/'
+                                href={DATASET_MANIFEST_GUIDE_URL}
                             >
                                 <QuestionCircleOutlined />
                             </Button>
                         </Tooltip>
                     </>
                 )}
-                rules={[{ required: true, message: 'Please, specify at least one manifest file' }]}
+                required
             />
-            <Form.List name='manifests'>
+            <Form.List
+                name='manifests'
+                rules={[
+                    {
+                        validator: async (_: RuleObject, names: string[]): Promise<void> => {
+                            if (!names || !names.length) {
+                                throw new Error('Please, specify at least one manifest file');
+                            }
+                        },
+                    },
+                ]}
+            >
                 {
-                    (fields) => (
+                    (fields: FormListFieldData[], _: FormListOperation, { errors }: { errors: React.ReactNode[] }) => (
                         <>
                             {fields.map((field, idx): JSX.Element => (
                                 <Form.Item key={idx} shouldUpdate>
@@ -123,6 +136,7 @@ export default function ManifestsManager(props: Props): JSX.Element {
                                     </Row>
                                 </Form.Item>
                             ))}
+                            <Form.ErrorList errors={errors} />
                         </>
                     )
                 }

cvat-ui/src/consts.ts

@@ -16,6 +16,7 @@ const SHARE_MOUNT_GUIDE_URL =
     'https://opencv.github.io/cvat/docs/administration/basics/installation/#share-path';
 const NUCLIO_GUIDE =
     'https://opencv.github.io/cvat//docs/administration/advanced/installation_automatic_annotation/';
+const DATASET_MANIFEST_GUIDE_URL = 'https://opencv.github.io/cvat/docs/manual/advanced/dataset_manifest/';
 const CANVAS_BACKGROUND_COLORS = ['#ffffff', '#f1f1f1', '#e5e5e5', '#d8d8d8', '#CCCCCC', '#B3B3B3', '#999999'];
 const NEW_LABEL_COLOR = '#b3b3b3';
 const LATEST_COMMENTS_SHOWN_QUICK_ISSUE = 3;
@@ -103,4 +104,5 @@ export default {
     DEFAULT_AWS_S3_REGIONS,
     DEFAULT_GOOGLE_CLOUD_STORAGE_LOCATIONS,
     OUTSIDE_PIC_URL,
+    DATASET_MANIFEST_GUIDE_URL,
 };