Improved Cloud Storage form/create task error message

CHANGELOG.md

@@ -23,6 +23,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Downloading additional data from cloud storage if use_cache=true and job_file_mapping are specified
   (<https://github.com/opencv/cvat/pull/6879>)
 - Leaving an organization (<https://github.com/opencv/cvat/pull/6422>)
+- Validation on Cloud Storage form / error message on create task form (<https://github.com/opencv/cvat/pull/6890>)
+
 
 ### Security
 - TDB

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.56.2",
+  "version": "1.56.3",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

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

@@ -90,6 +90,11 @@ export default function ManifestsManager(props: Props): JSX.Element {
                                                         required: true,
                                                         message: 'Please specify a manifest name',
                                                     },
+                                                    {
+                                                        type: 'string',
+                                                        pattern: /^.*\.(jsonl)$/,
+                                                        message: 'Manifest file should be in the .jsonl format',
+                                                    },
                                                 ]}
                                                 initialValue={field.name}
                                             >

cvat-ui/src/components/create-task-page/create-task-content.tsx

@@ -102,26 +102,42 @@ const defaultState: State = {
 };
 
 const UploadFileErrorMessages = {
-    one: 'It can not be processed. You can upload an archive with images, a video, a pdf file or multiple images',
-    multi: 'It can not be processed. You can upload one or more videos',
+    one: 'It can not be processed. You can upload an archive with images, a video, a pdf file or multiple images. ',
+    multi: 'It can not be processed. You can upload one or more videos. ',
 };
 
+function fileExtensionList(files: RemoteFile[]): string {
+    const fileTypes = files.map((file: RemoteFile) => `.${file.name.split('.').pop()}`);
+    return Array.from(new Set(fileTypes)).join(', ');
+}
+
+function checkFiles(files: RemoteFile[], type: SupportedShareTypes, baseError: string): string {
+    const erroredFiles = files.filter(
+        (it) => it.mimeType !== type,
+    );
+    if (erroredFiles.length !== 0) {
+        const unsupportedTypes = fileExtensionList(erroredFiles);
+        return `${baseError} Found unsupported types: ${unsupportedTypes} `;
+    }
+    return '';
+}
+
 function validateRemoteFiles(remoteFiles: RemoteFile[], many: boolean): string {
     let uploadFileErrorMessage = '';
-    let filteredFiles = remoteFiles;
     const regFiles = remoteFiles.filter((file) => file.type === 'REG');
     const excludedManifests = regFiles.filter((file) => !file.key.endsWith('.jsonl'));
     if (!many && excludedManifests.length > 1) {
-        uploadFileErrorMessage = excludedManifests.every(
-            (it) => it.mimeType === SupportedShareTypes.IMAGE,
-        ) ? '' : UploadFileErrorMessages.one;
+        uploadFileErrorMessage = checkFiles(
+            excludedManifests,
+            SupportedShareTypes.IMAGE,
+            UploadFileErrorMessages.one,
+        );
     } else if (many) {
-        filteredFiles = filteredFiles.filter((it) => it.mimeType === SupportedShareTypes.VIDEO);
-        // something is selected and no one video
-        // or something except of videos selected (excluding directories)
-        uploadFileErrorMessage = remoteFiles.length && (
-            !filteredFiles.length || filteredFiles.length !== regFiles.length
-        ) ? UploadFileErrorMessages.multi : '';
+        uploadFileErrorMessage = checkFiles(
+            regFiles,
+            SupportedShareTypes.VIDEO,
+            UploadFileErrorMessages.multi,
+        );
     }
     return uploadFileErrorMessage;
 }

cvat-ui/src/components/file-manager/remote-browser.tsx

@@ -29,7 +29,7 @@ interface Node {
     nextToken?: string | null;
 }
 
-export type RemoteFile = Pick<Node, 'key' | 'type' | 'mimeType'>;
+export type RemoteFile = Pick<Node, 'key' | 'type' | 'mimeType' | 'name'>;
 
 interface Props {
     resource: 'share' | CloudStorage;