add link to create of many tasks from project page (#5002)

* add link to create of many tasks from project page

* add dropdown for task actions

* add return to project after multi tasks creating

cvat-ui/src/components/common/cvat-dropdown-menu-paper/index.scss

@@ -0,0 +1,30 @@
+// Copyright (C) 2022 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+@import '../../../base.scss';
+
+.cvat-dropdown-menu-paper {
+    display: flex;
+    flex-direction: column;
+    background: $background-color-1;
+    padding: $grid-unit-size;
+    border-radius: 4px;
+    box-shadow: $box-shadow-base;
+
+    > * {
+        &:not(:first-child) {
+            margin-top: $grid-unit-size;
+        }
+
+        width: 100%;
+
+        .ant-upload {
+            width: 100%;
+
+            button {
+                width: 100%;
+            }
+        }
+    }
+}

cvat-ui/src/components/common/cvat-dropdown-menu-paper/index.tsx

@@ -0,0 +1,12 @@
+// Copyright (C) 2022 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+import './index.scss';
+
+export default function DropdownMenuPaper({ children }: { children: React.ReactNode }): JSX.Element {
+    return (
+        <div className='cvat-dropdown-menu-paper'>{children}</div>
+    );
+}

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

@@ -600,8 +600,12 @@ class CreateTaskContent extends React.PureComponent<Props & RouteComponentProps,
     };
 
     private handleOkMultiTasks = (): void => {
-        const { history } = this.props;
-        history.push('/tasks/');
+        const { history, projectId } = this.props;
+        if (projectId) {
+            history.push(`/projects/${projectId}`);
+        } else {
+            history.push('/tasks/');
+        }
     };
 
     private handleRetryCancelledMultiTasks = (): void => {

cvat-ui/src/components/project-page/project-page.tsx

@@ -11,8 +11,10 @@ import Spin from 'antd/lib/spin';
 import { Row, Col } from 'antd/lib/grid';
 import Result from 'antd/lib/result';
 import Button from 'antd/lib/button';
+import Dropdown from 'antd/lib/dropdown';
 import Title from 'antd/lib/typography/Title';
 import Pagination from 'antd/lib/pagination';
+import { MutliPlusIcon } from 'icons';
 import { PlusOutlined } from '@ant-design/icons';
 import Empty from 'antd/lib/empty';
 import Input from 'antd/lib/input';
@@ -26,6 +28,7 @@ import ModelRunnerDialog from 'components/model-runner-modal/model-runner-dialog
 import {
     SortingComponent, ResourceFilterHOC, defaultVisibility, updateHistoryFromQuery,
 } from 'components/resource-sorting-filtering';
+import CvatDropdownMenuPaper from 'components/common/cvat-dropdown-menu-paper';
 import DetailsComponent from './details';
 import ProjectTopBar from './top-bar';
 
@@ -225,13 +228,36 @@ export default function ProjectPageComponent(): JSX.Element {
                                     }}
                                 />
                             </div>
+                            <Dropdown
+                                trigger={['click']}
+                                overlay={(
+                                    <CvatDropdownMenuPaper>
+                                        <Button
+                                            type='primary'
+                                            icon={<PlusOutlined />}
+                                            className='cvat-create-task-button'
+                                            onClick={() => history.push(`/tasks/create?projectId=${id}`)}
+                                        >
+                                            Create a new task
+                                        </Button>
+                                        <Button
+                                            type='primary'
+                                            icon={<span className='anticon'><MutliPlusIcon /></span>}
+                                            className='cvat-create-multi-tasks-button'
+                                            onClick={() => history.push(`/tasks/create?projectId=${id}&many=true`)}
+                                        >
+                                            Create multi tasks
+                                        </Button>
+                                    </CvatDropdownMenuPaper>
+                                )}
+                            >
+                                <Button
+                                    type='primary'
+                                    className='cvat-create-task-dropdown'
+                                    icon={<PlusOutlined />}
+                                />
+                            </Dropdown>
                         </div>
-                        <Button
-                            type='primary'
-                            icon={<PlusOutlined />}
-                            className='cvat-create-task-button'
-                            onClick={() => history.push(`/tasks/create?projectId=${id}`)}
-                        />
                     </Col>
                 </Row>
                 { tasksFetching ? (

cvat-ui/src/components/tasks-page/styles.scss

@@ -5,31 +5,6 @@
 @import '../../base.scss';
 @import '../../styles.scss';
 
-.cvat-tasks-page-control-buttons-wrapper {
-    display: flex;
-    flex-direction: column;
-    background: $background-color-1;
-    padding: $grid-unit-size;
-    border-radius: 4px;
-    box-shadow: $box-shadow-base;
-
-    > * {
-        &:not(:first-child) {
-            margin-top: $grid-unit-size;
-        }
-
-        width: 100%;
-
-        .ant-upload {
-            width: 100%;
-
-            button {
-                width: 100%;
-            }
-        }
-    }
-}
-
 .cvat-tasks-page {
     padding-top: $grid-unit-size * 2;
     padding-bottom: $grid-unit-size;

cvat-ui/src/components/tasks-page/top-bar.tsx

@@ -16,10 +16,11 @@ import { importActions } from 'actions/import-actions';
 import { SortingComponent, ResourceFilterHOC, defaultVisibility } from 'components/resource-sorting-filtering';
 import { TasksQuery } from 'reducers';
 import { usePrevious } from 'utils/hooks';
+import { MutliPlusIcon } from 'icons';
+import CvatDropdownMenuPaper from 'components/common/cvat-dropdown-menu-paper';
 import {
     localStorageRecentKeyword, localStorageRecentCapacity, predefinedFilterValues, config,
 } from './tasks-filter-configuration';
-import { MutliPlusIcon } from '../../icons';
 
 const FilteringComponent = ResourceFilterHOC(
     config, localStorageRecentKeyword, localStorageRecentCapacity, predefinedFilterValues,
@@ -93,7 +94,7 @@ export default function TopBarComponent(props: VisibleTopBarProps): JSX.Element
                     <Dropdown
                         trigger={['click']}
                         overlay={(
-                            <div className='cvat-tasks-page-control-buttons-wrapper'>
+                            <CvatDropdownMenuPaper>
                                 <Button
                                     className='cvat-create-task-button'
                                     type='primary'
@@ -120,7 +121,7 @@ export default function TopBarComponent(props: VisibleTopBarProps): JSX.Element
                                     Create from backup
                                     {importing && <LoadingOutlined />}
                                 </Button>
-                            </div>
+                            </CvatDropdownMenuPaper>
                         )}
                     >
                         <Button type='primary' className='cvat-create-task-dropdown' icon={<PlusOutlined />} />

tests/cypress/integration/actions_projects_models/issue_2900_creating_more_one_tasks_from_project_per_time.js

@@ -44,6 +44,7 @@ context('Create more than one task per time when create from project.', () => {
 
     describe(`Testing "Issue ${issueID}"`, () => {
         it('Create more than one task per time from project.', () => {
+            cy.get('.cvat-create-task-dropdown').click();
             cy.get('.cvat-create-task-button').click();
             createTask(taskName.firstTask);
             createTask(taskName.secondTask);

tests/cypress/support/commands.js

@@ -181,11 +181,8 @@ Cypress.Commands.add(
         expectedResult = 'success',
         projectSubsetFieldValue = 'Test',
     ) => {
-        cy.url().then(($url) => {
-            if (!$url.includes('projects')) {
-                cy.get('.cvat-create-task-dropdown').click();
-            }
-
+        cy.url().then(() => {
+            cy.get('.cvat-create-task-dropdown').click();
             cy.get('.cvat-create-task-button').click({ force: true });
             cy.url().should('include', '/tasks/create');
             cy.get('[id="name"]').type(taskName);