Improved Cloud Storage form/create task error message (#6890)

<!-- Raise an issue to propose your change
(https://github.com/opencv/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the [Contribution
guide](https://opencv.github.io/cvat/docs/contributing/). -->

<!-- Provide a general summary of your changes in the Title above -->

### Motivation and context
<!-- Why is this change required? What problem does it solve? If it
fixes an open
issue, please link to the issue here. Describe your changes in detail,
add
screenshots. -->
Added form validation. CS manifest can be only in `.jsonl` format

![image](https://github.com/opencv/cvat/assets/50956430/c1f0b8b4-c2c4-4771-a893-9b43682660b5)


Improved error message on task creation form if some incorrect files are
selected. Shown their extensions

![image](https://github.com/opencv/cvat/assets/50956430/78c8ea2c-a6ab-445a-a3a0-16e5d0d94423)

### How has this been tested?
<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [x] I submit my changes into the `develop` branch
- [x] I have added a description of my changes into the
[CHANGELOG](https://github.com/opencv/cvat/blob/develop/CHANGELOG.md)
file
- [ ] I have updated the documentation accordingly
- [ ] I have added tests to cover my changes
- [x] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))
- [x] I have increased versions of npm packages if it is necessary

([cvat-canvas](https://github.com/opencv/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/opencv/cvat/tree/develop/cvat-core#versioning),

[cvat-data](https://github.com/opencv/cvat/tree/develop/cvat-data#versioning)
and

[cvat-ui](https://github.com/opencv/cvat/tree/develop/cvat-ui#versioning))

### License

- [ ] I submit _my code changes_ under the same [MIT License](
https://github.com/opencv/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.

CHANGELOG.md

@@ -68,6 +68,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>)
+
 
 ## \[2.7.1\] - 2023-09-15
 

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
  "name": "cvat-ui",
- "version": "1.57.0",
+ "version": "1.57.1",
  "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 must have .jsonl extension',
+ },
  ]}
  initialValue={field.name}
  >

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

@@ -99,26 +99,44 @@ 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: 'Wrong list of files. You can upload an archive with images, a video, a pdf file or multiple images. ',
+ multi: 'Wrong list of files. You can upload one or more videos. ',
 };
 
+function receiveExtensions(files: RemoteFile[]): string[] {
+ const fileTypes = files.filter((file: RemoteFile) => file.name.includes('.'))
+ .map((file: RemoteFile) => `.${file.name.split('.').pop()}`);
+ return fileTypes;
+}
+
+function checkFiles(files: RemoteFile[], type: SupportedShareTypes, baseError: string): string {
+ const erroredFiles = files.filter(
+ (it) => it.mimeType !== type,
+ );
+ if (erroredFiles.length !== 0) {
+ const unsupportedTypes = receiveExtensions(erroredFiles);
+ const extensionList = Array.from(new Set(unsupportedTypes));
+ return extensionList.length ? `${baseError} Found unsupported types: ${extensionList.join(', ')}. ` : baseError;
+ }
+ 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;