Antd4 migration minor fixes found on cvat.org (#2561)

* Fixed: 'Cannot read property key of undefined'

* Removed extra pagination parameters

* Fit canvas when collapsed

* Fixed task completion indicator

* Added reviewer info to serialized copy

* Updated version

cvat-ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -28698,9 +28698,9 @@
       }
     },
     "rc-virtual-list": {
-      "version": "3.2.2",
+      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.2.3.tgz",
-      "integrity": "sha512-OepvZDQGUbQQBFk5m2Ds32rfO/tSj9gZkLbzwaIw/hwGgvatDmW+j97YQvFkUQp/XDgdSGcfFfj/6XTKpz0J4g==",
+      "integrity": "sha512-uEeYDQWwQhxR97SekPeGRbzPtHSbSpw/mYb6QpZZ9bA43kf7s1socV3fD3ySYhQVzo0I+/IUD9jFGit6FbM0WA==",
       "requires": {
         "classnames": "^2.2.6",
         "rc-resize-observer": "^0.2.3",

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {
@@ -68,6 +68,7 @@
     "moment": "^2.29.1",
     "platform": "^1.3.6",
     "prop-types": "^15.7.2",
+    "rc-virtual-list": "^3.2.3",
     "react": "^16.14.0",
     "react-color": "^2.19.3",
     "react-cookie": "^4.0.3",

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx

@@ -125,14 +125,16 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
     const collapse = (): void => {
         const [collapser] = window.document.getElementsByClassName('attribute-annotation-sidebar');
 
+        const listener = (event: TransitionEvent): void => {
+            if (event.target && event.propertyName === 'width' && event.target === collapser) {
+                canvasInstance.fitCanvas();
+                canvasInstance.fit();
+                (collapser as HTMLElement).removeEventListener('transitionend', listener as any);
+            }
+        };
+
         if (collapser) {
-            collapser.addEventListener(
+            (collapser as HTMLElement).addEventListener('transitionend', listener as any);
-                'transitionend',
-                () => {
-                    canvasInstance.fitCanvas();
-                },
-                { once: true },
-            );
         }
 
         setSidebarCollapsed(!sidebarCollapsed);

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MIT
 
 import './styles.scss';
-import React, { Dispatch, useEffect } from 'react';
+import React, { Dispatch, useEffect, TransitionEvent } from 'react';
 import { AnyAction } from 'redux';
 import { connect } from 'react-redux';
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
@@ -81,24 +81,22 @@ function ObjectsSideBar(props: StateToProps & DispatchToProps & OwnProps): JSX.E
         };
     }, []);
 
-    useEffect(() => {
+    const collapse = (): void => {
-        const listener = (event: Event): void => {
+        const [collapser] = window.document.getElementsByClassName('cvat-objects-sidebar');
-            if (
+        const listener = (event: TransitionEvent): void => {
-                (event as TransitionEvent).propertyName === 'width' &&
+            if (event.target && event.propertyName === 'width' && event.target === collapser) {
-                ((event.target as any).classList as DOMTokenList).contains('ant-tabs-tab-prev')
+                canvasInstance.fitCanvas();
-            ) {
                 canvasInstance.fit();
+                (collapser as HTMLElement).removeEventListener('transitionend', listener as any);
             }
         };
 
-        const [sidebar] = window.document.getElementsByClassName('cvat-objects-sidebar');
+        if (collapser) {
-
+            (collapser as HTMLElement).addEventListener('transitionend', listener as any);
-        sidebar.addEventListener('transitionstart', listener);
+        }
 
-        return () => {
+        collapseSidebar();
-            sidebar.removeEventListener('transitionstart', listener);
+    };
-        };
-    }, []);
 
     return (
         <Layout.Sider
@@ -116,7 +114,7 @@ function ObjectsSideBar(props: StateToProps & DispatchToProps & OwnProps): JSX.E
                 className={`cvat-objects-sidebar-sider
                     ant-layout-sider-zero-width-trigger
                     ant-layout-sider-zero-width-trigger-left`}
-                onClick={collapseSidebar}
+                onClick={collapse}
             >
                 {sidebarCollapsed ? <MenuFoldOutlined title='Show' /> : <MenuUnfoldOutlined title='Hide' />}
             </span>

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

@@ -58,6 +58,7 @@ export default function ProjectListComponent(): JSX.Element {
                     <Pagination
                         className='cvat-projects-pagination'
                         onChange={changePage}
+                        showSizeChanger={false}
                         total={projectsCount}
                         pageSize={12}
                         current={page}

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

@@ -243,8 +243,13 @@ function JobListComponent(props: Props & RouteComponentProps): JSX.Element {
                                     );
 
                                     if (job.assignee) {
-                                        serialized += `\t assigned to: ${job.assignee.username}`;
+                                        serialized += `\t assigned to "${job.assignee.username}"`;
                                     }
+
+                                    if (job.reviewer) {
+                                        serialized += `\t reviewed by "${job.reviewer.username}"`;
+                                    }
+
                                     serialized += '\n';
                                 }
                                 copy(serialized);

cvat-ui/src/components/tasks-page/task-item.tsx

@@ -116,7 +116,7 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
                     </Col>
                 </Row>
                 <Row>
-                    <Col>
+                    <Col span={24}>
                         <Progress
                             className={`${progressColor} cvat-task-progress`}
                             percent={jobsProgress * 100}

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

@@ -34,6 +34,7 @@ export default function TaskListComponent(props: ContentListProps): JSX.Element
                     <Pagination
                         className='cvat-tasks-pagination'
                         onChange={onSwitchPage}
+                        showSizeChanger={false}
                         total={numberOfTasks}
                         pageSize={10}
                         current={currentPage}