Merge pull request #917 from opencv/bs/copy_jobs_to_clipboard

Added button to copy jobs info to clipboard

cvat-ui/package.json

@@ -41,6 +41,7 @@
     "@types/react-router-dom": "^5.1.0",
     "@types/react-share": "^3.0.1",
     "antd": "^3.25.2",
+    "copy-to-clipboard": "^3.2.0",
     "dotenv-webpack": "^1.7.0",
     "moment": "^2.24.0",
     "prop-types": "^15.7.2",

cvat-ui/src/components/cvat-app.tsx

@@ -139,7 +139,7 @@ export default class CVATApplication extends React.PureComponent<CVATAppProps> {
                     />
                 ),
                 duration: null,
-                description: error.length > 200 ? '' : error,
+                description: error.length > 200 ? 'Open the Browser Console to get details' : error,
             });
 
             console.error(error);

cvat-ui/src/components/task-page/job-list.tsx

@@ -3,17 +3,21 @@ import React from 'react';
 import {
     Row,
     Col,
+    Icon,
     Table,
+    Button,
+    Tooltip,
 } from 'antd';
 
 import Text from 'antd/lib/typography/Text';
-import Title from 'antd/lib/typography/Title';
 
 import moment from 'moment';
+import copy from 'copy-to-clipboard';
 
 import UserSelector from './user-selector';
 import getCore from '../../core';
 
+
 const core = getCore();
 
 const baseURL = core.config.backendAPI.slice(0, -7);
@@ -123,7 +127,32 @@ export default function JobListComponent(props: Props): JSX.Element {
         <div className='cvat-task-job-list'>
             <Row type='flex' justify='space-between' align='middle'>
                 <Col>
-                    <Title level={4} className='cvat-black-color cvat-jobs-header'> Jobs </Title>
+                    <Text className='cvat-black-color cvat-jobs-header'> Jobs </Text>
+                    <Tooltip trigger='click' title='Copied to clipboard!'>
+                        <Button
+                            type='link'
+                            onClick={(): void => {
+                                let serialized = '';
+                                const [latestJob] = [...taskInstance.jobs].reverse();
+                                for (const job of taskInstance.jobs) {
+                                    serialized += `Job #${job.id}`.padEnd(`${latestJob.id}`.length + 6, ' ');
+                                    serialized += `: ${baseURL}/?id=${job.id}`
+                                        .padEnd(`${latestJob.id}`.length + baseURL.length + 8, ' ');
+                                    serialized += `: [${job.startFrame}-${job.stopFrame}]`
+                                        .padEnd(`${latestJob.startFrame}${latestJob.stopFrame}`.length + 5, ' ');
+
+                                    if (job.assignee) {
+                                        serialized += `\t assigned to: ${job.assignee.username}`;
+                                    }
+                                    serialized += '\n';
+                                }
+                                copy(serialized);
+                            }}
+                        >
+                            <Icon type='copy' theme='twoTone' />
+                            Copy
+                        </Button>
+                    </Tooltip>
                 </Col>
                 <Col>
                     <Text className='cvat-black-color'>

cvat-ui/src/stylesheet.css

@@ -435,6 +435,12 @@
     background: white;
 }
 
+.cvat-task-job-list > div:nth-child(1) > div:nth-child(1) {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+
 .cvat-task-top-bar {
     margin-top: 20px;
     margin-bottom: 10px;
@@ -590,6 +596,8 @@ textarea.ant-input.cvat-raw-labels-viewer {
 
 .ant-typography.cvat-jobs-header {
     margin-bottom: 0px;
+    font-size: 20px;
+    font-weight: bold;
 }
 
 /* Pagination in center */