Do not reload the page when changing job state

CHANGELOG.md

@@ -11,7 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Admin actions for easy activation/deactivation of users (<https://github.com/opencv/cvat/pull/6314>)
 
 ### Changed
-- TDB
+- Do not reload annotation view when renew the job or update job state (<https://github.com/opencv/cvat/pull/6851>)
 
 ### Deprecated
 - TDB

cvat-core/src/session-implementation.ts

@@ -70,9 +70,21 @@ export function implementJob(Job) {
                 jobData.assignee = jobData.assignee.id;
             }
 
-            const data = await serverProxy.jobs.save(this.id, jobData);
-            this._updateTrigger.reset();
-            return new Job(data);
+            let updatedJob = null;
+            try {
+                const data = await serverProxy.jobs.save(this.id, jobData);
+                updatedJob = new Job(data);
+                this._updateTrigger.reset();
+            } catch (error) {
+                updatedJob = new Job(this._initialData);
+                throw error;
+            } finally {
+                this.stage = updatedJob.stage;
+                this.state = updatedJob.state;
+                this.assignee = updatedJob.assignee;
+            }
+
+            return this;
         }
 
         const jobSpec = {

cvat-core/src/session.ts

@@ -381,7 +381,7 @@ export class Job extends Session {
         log: CallableFunction;
     };
 
-    constructor(initialData: SerializedJob) {
+    constructor(initialData: Readonly<SerializedJob>) {
         super();
         const data = {
             id: undefined,
@@ -536,6 +536,9 @@ export class Job extends Session {
                 _updateTrigger: {
                     get: () => updateTrigger,
                 },
+                _initialData: {
+                    get: () => initialData,
+                },
             }),
         );
 

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.56.0",
+  "version": "1.56.1",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/actions/annotation-actions.ts

@@ -29,7 +29,7 @@ import {
     ShapeType,
     Workspace,
 } from 'reducers';
-import { updateJobAsync } from './tasks-actions';
+import { updateJobAsync } from './jobs-actions';
 import { switchToolsBlockerState } from './settings-actions';
 
 interface AnnotationsParameters {

cvat-ui/src/actions/jobs-actions.ts

@@ -19,6 +19,9 @@ export enum JobsActionTypes {
     GET_JOB_PREVIEW_SUCCESS = 'GET_JOB_PREVIEW_SUCCESS',
     GET_JOB_PREVIEW_FAILED = 'GET_JOB_PREVIEW_FAILED',
     CREATE_JOB_FAILED = 'CREATE_JOB_FAILED',
+    UPDATE_JOB = 'UPDATE_JOB',
+    UPDATE_JOB_SUCCESS = 'UPDATE_JOB_SUCCESS',
+    UPDATE_JOB_FAILED = 'UPDATE_JOB_FAILED',
     DELETE_JOB = 'DELETE_JOB',
     DELETE_JOB_SUCCESS = 'DELETE_JOB_SUCCESS',
     DELETE_JOB_FAILED = 'DELETE_JOB_FAILED',
@@ -46,6 +49,15 @@ const jobsActions = {
     createJobFailed: (error: any) => (
         createAction(JobsActionTypes.CREATE_JOB_FAILED, { error })
     ),
+    updateJob: () => (
+        createAction(JobsActionTypes.UPDATE_JOB)
+    ),
+    updateJobSuccess: (job: Job) => (
+        createAction(JobsActionTypes.UPDATE_JOB_SUCCESS, { job })
+    ),
+    updateJobFailed: (jobID: number, error: any) => (
+        createAction(JobsActionTypes.UPDATE_JOB_FAILED, { jobID, error })
+    ),
     deleteJob: (jobID: number) => (
         createAction(JobsActionTypes.DELETE_JOB, { jobID })
     ),
@@ -93,6 +105,21 @@ export const createJobAsync = (data: JobData): ThunkAction => async (dispatch) =
     }
 };
 
+export function updateJobAsync(jobInstance: Job): ThunkAction<Promise<boolean>> {
+    return async (dispatch): Promise<boolean> => {
+        try {
+            dispatch(jobsActions.updateJob());
+            const updated = await jobInstance.save();
+            dispatch(jobsActions.updateJobSuccess(updated));
+        } catch (error) {
+            dispatch(jobsActions.updateJobFailed(jobInstance.id, error));
+            return false;
+        }
+
+        return true;
+    };
+}
+
 export const deleteJobAsync = (job: Job): ThunkAction => async (dispatch) => {
     dispatch(jobsActions.deleteJob(job.id));
     try {

cvat-ui/src/actions/tasks-actions.ts

@@ -22,7 +22,6 @@ export enum TasksActionTypes {
     DELETE_TASK_SUCCESS = 'DELETE_TASK_SUCCESS',
     DELETE_TASK_FAILED = 'DELETE_TASK_FAILED',
     CREATE_TASK_FAILED = 'CREATE_TASK_FAILED',
-    UPDATE_JOB_FAILED = 'UPDATE_JOB_FAILED',
     SWITCH_MOVE_TASK_MODAL_VISIBLE = 'SWITCH_MOVE_TASK_MODAL_VISIBLE',
     GET_TASK_PREVIEW = 'GET_TASK_PREVIEW',
     GET_TASK_PREVIEW_SUCCESS = 'GET_TASK_PREVIEW_SUCCESS',
@@ -294,25 +293,6 @@ ThunkAction<Promise<void>, {}, {}, AnyAction> {
     };
 }
 
-function updateJobFailed(jobID: number, error: any): AnyAction {
-    const action = {
-        type: TasksActionTypes.UPDATE_JOB_FAILED,
-        payload: { jobID, error },
-    };
-
-    return action;
-}
-
-export function updateJobAsync(jobInstance: any): ThunkAction<Promise<void>, {}, {}, AnyAction> {
-    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
-        try {
-            await jobInstance.save();
-        } catch (error) {
-            dispatch(updateJobFailed(jobInstance.id, error));
-        }
-    };
-}
-
 export function switchMoveTaskModalVisible(visible: boolean, taskId: number | null = null): AnyAction {
     const action = {
         type: TasksActionTypes.SWITCH_MOVE_TASK_MODAL_VISIBLE,

cvat-ui/src/components/annotation-page/top-bar/annotation-menu.tsx

@@ -16,8 +16,7 @@ import Collapse from 'antd/lib/collapse';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { MenuInfo } from 'rc-menu/lib/interface';
 import CVATTooltip from 'components/common/cvat-tooltip';
-import { getCore } from 'cvat-core-wrapper';
-import { JobStage } from 'reducers';
+import { getCore, JobStage } from 'cvat-core-wrapper';
 
 const core = getCore();
 
@@ -213,7 +212,7 @@ function AnnotationMenuComponent(props: Props & RouteComponentProps): JSX.Elemen
                     <Text className={computeClassName(JobState.COMPLETED)}>{JobState.COMPLETED}</Text>
                 </Menu.Item>
             </Menu.SubMenu>
-            {[JobStage.ANNOTATION, JobStage.REVIEW].includes(jobStage) ?
+            {[JobStage.ANNOTATION, JobStage.VALIDATION].includes(jobStage) ?
                 <Menu.Item key={Actions.FINISH_JOB}>Finish the job</Menu.Item> : null}
             {jobStage === JobStage.ACCEPTANCE ?
                 <Menu.Item key={Actions.RENEW_JOB}>Renew the job</Menu.Item> : null}

cvat-ui/src/components/job-item/job-actions-menu.tsx

@@ -1,6 +1,7 @@
 // Copyright (C) 2023 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
+
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router';
@@ -15,13 +16,12 @@ import {
 } from 'cvat-core-wrapper';
 import { deleteJobAsync } from 'actions/jobs-actions';
 import { importActions } from 'actions/import-actions';
-import { updateJobAsync } from 'actions/tasks-actions';
 
 const core = getCore();
 
 interface Props {
     job: Job;
-    onJobUpdate?: (job: Job) => void;
+    onJobUpdate: (job: Job) => void;
 }
 
 function JobActionsMenu(props: Props): JSX.Element {
@@ -62,19 +62,11 @@ function JobActionsMenu(props: Props): JSX.Element {
             } else if (action.key === 'renew_job') {
                 job.state = core.enums.JobState.NEW;
                 job.stage = JobStage.ANNOTATION;
-                if (onJobUpdate) {
-                    onJobUpdate(job);
-                } else {
-                    dispatch(updateJobAsync(job));
-                }
+                onJobUpdate(job);
             } else if (action.key === 'finish_job') {
                 job.stage = JobStage.ACCEPTANCE;
                 job.state = core.enums.JobState.COMPLETED;
-                if (onJobUpdate) {
-                    onJobUpdate(job);
-                } else {
-                    dispatch(updateJobAsync(job));
-                }
+                onJobUpdate(job);
             }
         }}
         >

cvat-ui/src/components/job-item/job-item.tsx

@@ -30,7 +30,7 @@ import CVATTooltip from 'components/common/cvat-tooltip';
 import JobActionsMenu from './job-actions-menu';
 
 interface Props {
-    job: Job,
+    job: Job;
     task: Task,
     onJobUpdate: (job: Job) => void;
 }

cvat-ui/src/components/jobs-page/job-card.tsx

@@ -1,5 +1,5 @@
 // Copyright (C) 2022 Intel Corporation
-// Copyright (C) 2022 CVAT.ai Corporation
+// Copyright (C) 2022-2023 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -9,6 +9,8 @@ import Card from 'antd/lib/card';
 import Descriptions from 'antd/lib/descriptions';
 import { MoreOutlined } from '@ant-design/icons';
 import Dropdown from 'antd/lib/dropdown';
+
+import { Job } from 'cvat-core-wrapper';
 import { useCardHeightHOC } from 'utils/hooks';
 import Preview from 'components/common/preview';
 import JobActionsMenu from 'components/job-item/job-actions-menu';
@@ -22,11 +24,12 @@ const useCardHeight = useCardHeightHOC({
 });
 
 interface Props {
-    job: any;
+    job: Job;
+    onJobUpdate: (job: Job) => void;
 }
 
 function JobCardComponent(props: Props): JSX.Element {
-    const { job } = props;
+    const { job, onJobUpdate } = props;
     const [expanded, setExpanded] = useState<boolean>(false);
     const history = useHistory();
     const height = useCardHeight();
@@ -73,7 +76,7 @@ function JobCardComponent(props: Props): JSX.Element {
                     <Descriptions.Item label='Assignee'>{job.assignee.username}</Descriptions.Item>
                 ) : null}
             </Descriptions>
-            <Dropdown overlay={<JobActionsMenu job={job} />}>
+            <Dropdown overlay={<JobActionsMenu onJobUpdate={onJobUpdate} job={job} />}>
                 <MoreOutlined className='cvat-job-card-more-button' />
             </Dropdown>
         </Card>

cvat-ui/src/components/jobs-page/jobs-content.tsx

@@ -1,4 +1,5 @@
 // Copyright (C) 2022 Intel Corporation
+// Copyright (C) 2023 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -9,7 +10,12 @@ import { CombinedState } from 'reducers';
 import { Job, JobType } from 'cvat-core-wrapper';
 import JobCard from './job-card';
 
-function JobsContentComponent(): JSX.Element {
+interface Props {
+    onJobUpdate(job: Job): void;
+}
+
+function JobsContentComponent(props: Props): JSX.Element {
+    const { onJobUpdate } = props;
     const jobs = useSelector((state: CombinedState) => state.jobs.current);
     const dimensions = {
         md: 22,
@@ -22,7 +28,7 @@ function JobsContentComponent(): JSX.Element {
         <Row justify='center' align='middle'>
             <Col className='cvat-jobs-page-list' {...dimensions}>
                 {jobs.filter((job: Job) => job.type === JobType.ANNOTATION).map((job: Job): JSX.Element => (
-                    <JobCard job={job} key={job.id} />
+                    <JobCard onJobUpdate={onJobUpdate} job={job} key={job.id} />
                 ))}
             </Col>
         </Row>

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

@@ -1,9 +1,10 @@
 // Copyright (C) 2022 Intel Corporation
+// Copyright (C) 2023 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
 import './styles.scss';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
 import { useDispatch, useSelector } from 'react-redux';
 import Spin from 'antd/lib/spin';
@@ -12,9 +13,10 @@ import Pagination from 'antd/lib/pagination';
 import Empty from 'antd/lib/empty';
 import Text from 'antd/lib/typography/Text';
 
+import { Job } from 'cvat-core-wrapper';
 import { updateHistoryFromQuery } from 'components/resource-sorting-filtering';
 import { CombinedState, Indexable } from 'reducers';
-import { getJobsAsync } from 'actions/jobs-actions';
+import { getJobsAsync, updateJobAsync } from 'actions/jobs-actions';
 
 import TopBarComponent from './top-bar';
 import JobsContentComponent from './jobs-content';
@@ -26,6 +28,9 @@ function JobsPageComponent(): JSX.Element {
     const query = useSelector((state: CombinedState) => state.jobs.query);
     const fetching = useSelector((state: CombinedState) => state.jobs.fetching);
     const count = useSelector((state: CombinedState) => state.jobs.count);
+    const onJobUpdate = useCallback((job: Job) => {
+        dispatch(updateJobAsync(job));
+    }, []);
 
     const queryParams = new URLSearchParams(history.location.search);
     const updatedQuery = { ...query };
@@ -51,7 +56,7 @@ function JobsPageComponent(): JSX.Element {
 
     const content = count ? (
         <>
-            <JobsContentComponent />
+            <JobsContentComponent onJobUpdate={onJobUpdate} />
             <Row justify='space-around' about='middle'>
                 <Col md={22} lg={18} xl={16} xxl={16}>
                     <Pagination