Cypress tests for source & target storage

.github/workflows/full.yml

@@ -305,6 +305,7 @@ jobs:
             -f docker-compose.yml \
             -f docker-compose.dev.yml \
             -f components/serverless/docker-compose.serverless.yml \
+            -f tests/docker-compose.minio.yml \
             -f tests/docker-compose.file_share.yml up -d
 
       - name: Waiting for server

.github/workflows/main.yml

@@ -266,6 +266,7 @@ jobs:
             -f docker-compose.yml \
             -f docker-compose.dev.yml \
             -f components/serverless/docker-compose.serverless.yml \
+            -f tests/docker-compose.minio.yml \
             -f tests/docker-compose.file_share.yml up -d
 
       - name: Waiting for server

.github/workflows/schedule.yml

@@ -319,6 +319,7 @@ jobs:
             -f docker-compose.yml \
             -f docker-compose.dev.yml \
             -f tests/docker-compose.file_share.yml \
+            -f tests/docker-compose.minio.yml \
             -f components/serverless/docker-compose.serverless.yml up -d
 
       - name: Waiting for server

cvat-core/src/annotations.ts

@@ -4,6 +4,7 @@
 // SPDX-License-Identifier: MIT
 
 import { Storage } from './storage';
+
 const serverProxy = require('./server-proxy').default;
 const Collection = require('./annotations-collection');
 const AnnotationsSaver = require('./annotations-saver');

cvat-ui/src/components/select-cloud-storage/select-cloud-storage.tsx

@@ -127,6 +127,7 @@ function SelectCloudStorage(props: Props): JSX.Element {
                     setSearchPhrase(selectedCloudStorage?.displayName || '');
                 }}
                 allowClear
+                className={`cvat-search${!name ? '-' : `-${name[0].replace('Storage', '-storage')}-`}cloud-storage-field`}
             >
                 <Input />
             </AutoComplete>

cvat-ui/src/components/storage/storage-field.tsx

@@ -31,6 +31,11 @@ export default function StorageField(props: Props): JSX.Element {
     } = props;
     const [cloudStorage, setCloudStorage] = useState<CloudStorage | null>(null);
     const [potentialCloudStorage, setPotentialCloudStorage] = useState('');
+    const [storageType, setStorageType] = useState('');
+
+    useEffect(() => {
+        setStorageType(locationName[0].replace('Storage', '-storage'));
+    }, [locationName]);
 
     function renderCloudStorage(): JSX.Element {
         return (
@@ -65,16 +70,30 @@ export default function StorageField(props: Props): JSX.Element {
         <>
             <Form.Item name={locationName}>
                 <Select
+                    virtual={false}
                     onChange={(location: StorageLocation) => {
                         if (onChangeLocationValue) onChangeLocationValue(location);
                     }}
                     onClear={() => {
                         if (onChangeLocationValue) onChangeLocationValue(StorageLocation.LOCAL);
                     }}
                     allowClear
+                    className={`cvat-select-${storageType}`}
                 >
-                    <Option value={StorageLocation.LOCAL}>Local</Option>
-                    <Option value={StorageLocation.CLOUD_STORAGE}>Cloud storage</Option>
+                    <Option
+                        value={StorageLocation.LOCAL}
+                        key={`${storageType}-${StorageLocation.LOCAL.toLowerCase()}`}
+                        className={`cvat-select-${storageType}-location`}
+                    >
+                        Local
+                    </Option>
+                    <Option
+                        value={StorageLocation.CLOUD_STORAGE}
+                        key={`${storageType}-${StorageLocation.CLOUD_STORAGE.toLowerCase()}`}
+                        className={`cvat-select-${storageType}-location`}
+                    >
+                        Cloud storage
+                    </Option>
                 </Select>
             </Form.Item>
             {locationValue === StorageLocation.CLOUD_STORAGE && renderCloudStorage()}

site/content/en/docs/contributing/running-tests.md

@@ -14,6 +14,7 @@ description: 'Instructions on how to run all existence tests.'
              -f docker-compose.yml \
              -f docker-compose.dev.yml \
              -f components/serverless/docker-compose.serverless.yml \
+             -f tests/docker-compose.minio.yml \
              -f tests/docker-compose.file_share.yml up -d
    ```
 1. Add test user in CVAT:

tests/cypress/integration/actions_projects_models/case_117_backup_restore_project_to_various_storages.js

@@ -0,0 +1,165 @@
+// Copyright (C) 2022 CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+/// <reference types="cypress" />
+
+context('Tests source & target storage for backups.', () => {
+    const backupArchiveName = 'project_backup';
+    let projectID = '';
+    let createdCloudStorageId;
+    const caseId = '117';
+    const taskName = `Case ${caseId}`;
+    const labelName = 'car';
+    const attrName = 'color';
+    const textDefaultValue = 'red';
+    const imagesCount = 1;
+    const imageFileName = `image_${taskName.replace(/\s+/g, '_').toLowerCase()}`;
+    const width = 800;
+    const height = 800;
+    const posX = 10;
+    const posY = 10;
+    const color = 'gray';
+    const dataArchiveName = `${imageFileName}.zip`;
+    const archivePath = `cypress/fixtures/${dataArchiveName}`;
+    const imagesFolder = `cypress/fixtures/${imageFileName}`;
+    const directoryToArchive = imagesFolder;
+
+    const serverHost = Cypress.config('baseUrl').includes('3000') ? 'localhost' : 'minio';
+
+    const cloudStorageData = {
+        displayName: 'Demo bucket',
+        resource: 'public',
+        manifest: 'manifest.jsonl',
+        endpointUrl: `http://${serverHost}:9000`,
+    };
+
+    const storageConnectedToCloud = {
+        location: 'Cloud storage',
+        cloudStorageId: undefined,
+    };
+
+    const project = {
+        name: `Case ${caseId}`,
+        label: labelName,
+        attrName: 'color',
+        attrVaue: 'red',
+        multiAttrParams: false,
+        advancedConfiguration: {
+            sourceStorage: {
+                ...storageConnectedToCloud,
+                displayName: cloudStorageData.displayName,
+            },
+            targetStorage: {
+                ...storageConnectedToCloud,
+                displayName: cloudStorageData.displayName,
+            },
+        },
+    };
+
+    const task = {
+        name: taskName,
+        label: labelName,
+        attrName,
+        textDefaultValue,
+        dataArchiveName,
+        multiAttrParams: false,
+        forProject: true,
+        attachToProject: true,
+        projectName: project.name,
+        advancedConfiguration: {
+            sourceStorage: {
+                disableSwitch: true,
+                location: 'Local',
+                cloudStorageId: null,
+            },
+            targetStorage: {
+                disableSwitch: true,
+                location: 'Local',
+                cloudStorageId: null,
+            },
+        },
+    };
+
+    function getProjectID() {
+        cy.url().then((url) => {
+            projectID = Number(url.split('/').slice(-1)[0].split('?')[0]);
+        });
+    }
+
+    before(() => {
+        cy.visit('auth/login');
+        cy.login();
+        createdCloudStorageId = cy.attachS3Bucket(cloudStorageData);
+        cy.imageGenerator(imagesFolder, imageFileName, width, height, color, posX, posY, labelName, imagesCount);
+        cy.createZipArchive(directoryToArchive, archivePath);
+        cy.goToProjectsList();
+        project.advancedConfiguration.sourceStorage.cloudStorageId = createdCloudStorageId;
+        project.advancedConfiguration.targetStorage.cloudStorageId = createdCloudStorageId;
+
+        cy.createProjects(
+            project.name,
+            project.label,
+            project.attrName,
+            project.attrVaue,
+            project.multiAttrParams,
+            project.advancedConfiguration,
+        );
+
+        cy.goToTaskList();
+        cy.createAnnotationTask(
+            task.name,
+            task.label,
+            task.attrName,
+            task.textDefaultValue,
+            dataArchiveName,
+            task.multiAttrParams,
+            null,
+            task.forProject,
+            task.attachToProject,
+            task.projectName,
+        );
+        cy.openProject(project.name);
+        getProjectID();
+    });
+
+    after(() => {
+        cy.goToCloudStoragesPage();
+        cy.deleteCloudStorage(cloudStorageData.displayName);
+        cy.logout();
+        cy.getAuthKey().then((authKey) => {
+            cy.deleteProjects(authKey, [project.name]);
+        });
+    });
+
+    describe(`Testing case "${caseId}"`, () => {
+        it('Export project to custom local storage', () => {
+            cy.goToProjectsList();
+            cy.backupProject(
+                project.name,
+                backupArchiveName,
+                { location: 'Local' },
+                false,
+            );
+            cy.waitForDownload();
+        });
+
+        it('Export project to default minio bucket', () => {
+            cy.goToProjectsList();
+            cy.backupProject(
+                project.name,
+                backupArchiveName,
+                project.advancedConfiguration.targetStorage,
+            );
+            cy.waitForFileUploadToCloudStorage();
+            cy.deleteProject(project.name, projectID);
+        });
+
+        it('Import project from minio bucket', () => {
+            cy.restoreProject(
+                `${backupArchiveName}.zip`,
+                project.advancedConfiguration.sourceStorage,
+            );
+        });
+    });
+});

tests/cypress/integration/actions_tasks/issue_2473_import_annotations_frames_dots_in_name.js

@@ -112,12 +112,12 @@ context('Import annotations for frames with dots in name.', { browser: '!firefox
 
         it('Upload annotation with YOLO format to job.', () => {
             cy.interactMenu('Upload annotations');
+            cy.intercept('GET', '/api/jobs/**/annotations?**').as('uploadAnnotationsGet');
             uploadAnnotation(
                 dumpType.split(' ')[0],
                 annotationArchiveName,
                 '.cvat-modal-content-load-job-annotation',
             );
-            cy.intercept('GET', '/api/jobs/**/annotations?**').as('uploadAnnotationsGet');
             cy.wait('@uploadAnnotationsGet').its('response.statusCode').should('equal', 200);
             cy.contains('Annotations have been loaded').should('be.visible');
             cy.closeNotification('.ant-notification-notice-info');