refactored issues view

cvat-core/src/quality-conflict.ts

@@ -36,6 +36,7 @@ export class AnnotationConflict {
     public readonly type: string;
     public readonly conflictType: QualityConflictType;
     public readonly importance: ConflictImportance;
+    public readonly description: string;
 
     constructor(initialData: RawAnnotationConflictData) {
         const data: RawAnnotationConflictData = {
@@ -70,6 +71,12 @@ export class AnnotationConflict {
                 importance: {
                     get: () => data.importance,
                 },
+                description: {
+                    get: () => {
+                        const desc = this.conflictType.split('_').join(' ');
+                        return desc.charAt(0).toUpperCase() + desc.slice(1);
+                    },
+                },
             }),
         );
     }

cvat-ui/src/components/annotation-page/canvas/views/canvas2d/canvas-context-menu.tsx

@@ -58,7 +58,7 @@ function ReviewContextMenu({
                     className='cvat-context-menu-item cvat-quick-issue-from-conflict'
                     key={ReviewContextMenuKeys.QUICK_ISSUE_FROM_CONFLICT}
                 >
-                    {`Open an issue: ${conflict.description}`}
+                    {`Quick issue: ${conflict.description}`}
                 </Menu.Item>
             ) : null}
             <Menu.Item className='cvat-context-menu-item' key={ReviewContextMenuKeys.QUICK_ISSUE_POSITION}>

cvat-ui/src/components/annotation-page/canvas/views/canvas2d/canvas-wrapper.tsx

@@ -898,7 +898,7 @@ class CanvasWrapperComponent extends React.PureComponent<Props> {
                     (c: AnnotationConflict) => c.objId === objectState.serverID && c.jobId === objectState.jobID,
                 );
                 if (conflict && workspace === Workspace.REVIEW_WORKSPACE) {
-                    objectState.conflict = { description: conflict.conflictType };
+                    objectState.conflict = { description: conflict.description };
                 } else {
                     objectState.conflict = null;
                 }

cvat-ui/src/components/annotation-page/review/conflicts-aggregator.tsx

@@ -57,9 +57,8 @@ export default function ConflictAggregatorComponent(): JSX.Element | null {
                     if (state && canvasInstance) {
                         const points = canvasInstance.setupConflictsRegions(state);
                         if (points) {
-                            const desc = c.conflictType.split('_').join(' ');
                             return {
-                                description: desc.charAt(0).toUpperCase() + desc.slice(1),
+                                description: c.description,
                                 importance: c.importance,
                                 x: points[0],
                                 y: points[1],

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

@@ -8,13 +8,14 @@ import {
     LeftOutlined, RightOutlined, EyeInvisibleFilled, EyeOutlined,
     CheckCircleFilled, CheckCircleOutlined,
 } from '@ant-design/icons';
-import Alert from 'antd/lib/alert';
 import { Row, Col } from 'antd/lib/grid';
+import Text from 'antd/lib/typography/Text';
 
 import { changeFrameAsync } from 'actions/annotation-actions';
 import { reviewActions } from 'actions/review-actions';
 import CVATTooltip from 'components/common/cvat-tooltip';
 import { CombinedState } from 'reducers';
+import moment from 'moment';
 
 export default function LabelsListComponent(): JSX.Element {
     const dispatch = useDispatch();
@@ -47,7 +48,7 @@ export default function LabelsListComponent(): JSX.Element {
                 opacity: 0.5,
             },
         };
-
+    console.log(frameIssues);
     return (
         <>
             <div className='cvat-objects-sidebar-issues-list-header'>
@@ -101,7 +102,9 @@ export default function LabelsListComponent(): JSX.Element {
                         <div
                             key={frameIssue.id}
                             id={`cvat-objects-sidebar-issue-item-${frameIssue.id}`}
-                            className='cvat-objects-sidebar-issue-item'
+                            className={
+                                `cvat-objects-sidebar-issue-item ${frameIssue.resolved ? 'cvat-objects-sidebar-issue-resolved' : ''}`
+                            }
                             onMouseEnter={() => {
                                 const element = window.document.getElementById(
                                     `cvat_canvas_issue_region_${frameIssue.id}`,
@@ -119,11 +122,15 @@ export default function LabelsListComponent(): JSX.Element {
                                 }
                             }}
                         >
-                            {frameIssue.resolved ? (
-                                <Alert message='Resolved' type='success' showIcon />
-                            ) : (
-                                <Alert message='Opened' type='warning' showIcon />
-                            )}
+                            <Row>
+                                <Text strong>{`#${frameIssue.id} • Issue`}</Text>
+                            </Row>
+                            <Row>
+                                <Text>{frameIssue.comments[0]?.message ? frameIssue.comments[0]?.message : ''}</Text>
+                            </Row>
+                            <Row>
+                                <Text>{moment(frameIssue.createdDate).fromNow()}</Text>
+                            </Row>
                         </div>
                     ),
                 )}

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

@@ -112,20 +112,26 @@
     width: 100%;
     margin: 1px;
     padding: 2px;
+    border-left: 3px solid #ff7300;
+    border-bottom: 1px solid $border-color-1;
 
     &:hover {
-        padding: 0;
-
-        > .ant-alert {
-            border-width: 3px;
-        }
+        border-left: 4px solid #ff7300;
     }
 
     > .ant-alert.ant-alert-with-description {
         padding: $grid-unit-size $grid-unit-size $grid-unit-size $grid-unit-size * 8;
     }
 }
 
+.cvat-objects-sidebar-issue-resolved {
+    border-left: 3px solid $border-color-1;
+
+    &:hover {
+        border-left: 4px solid $border-color-1;
+    }
+}
+
 .cvat-objects-sidebar-states-header {
     background: $objects-bar-tabs-color;
     padding: 5px;