Copy JOB info to clibpard

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

@@ -3,16 +3,19 @@ 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 UserSelector from './user-selector';
 import getCore from '../../core';
+import copyToClipboard from '../../utils/copy-to-clipboard';
 
 const core = getCore();
 
@@ -123,7 +126,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 + 7, ' ');
+                                    serialized += `: [${job.startFrame}-${job.stopFrame}]`
+                                        .padEnd(`${latestJob.startFrame}${latestJob.stopFrame}`.length + 5, ' ');
+
+                                    if (job.assignee) {
+                                        serialized += `\t assigned to: ${job.assignee.username}`;
+                                    }
+                                    serialized += '\n';
+                                }
+                                copyToClipboard(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 */

cvat-ui/src/utils/copy-to-clipboard.ts

@@ -0,0 +1,8 @@
+export default function copyToClipboard(str: string): void {
+    const el = document.createElement('textarea');
+    el.value = str;
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+}