Fixed failure after updating a label on cvat.org (#2199)

* Fixed failure after updating a label on cvat.org (the bug is related with low bandwidth)

* Removed extra line of code

* Updated NPM version

* Fix test

* Better fix for the test

cvat-core/src/server-proxy.js

@@ -251,7 +251,7 @@
                     const data = JSON.stringify({
                         old_password: oldPassword,
                         new_password1: newPassword1,
-                        new_password2:newPassword2,
+                        new_password2: newPassword2,
                     });
                     await Axios.post(`${config.backendAPI}/auth/password/change`, data, {
                         proxy: config.proxy,
@@ -280,13 +280,13 @@
                 }
             }
 
-            async function resetPassword(newPassword1, newPassword2, uid, token) {
+            async function resetPassword(newPassword1, newPassword2, uid, _token) {
                 try {
                     const data = JSON.stringify({
                         new_password1: newPassword1,
                         new_password2: newPassword2,
                         uid,
-                        token,
+                        token: _token,
                     });
                     await Axios.post(`${config.backendAPI}/auth/password/reset/confirm`, data, {
                         proxy: config.proxy,
@@ -456,7 +456,7 @@
                     throw generateError(errorData);
                 }
 
-                onUpdate('The data is being uploaded to the server..');
+                onUpdate('The data are being uploaded to the server..');
                 try {
                     await Axios.post(`${backendAPI}/tasks/${response.data.id}/data`, taskData, {
                         proxy: config.proxy,

cvat-ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.9.6",
+  "version": "1.9.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

cvat-ui/package.json

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

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

@@ -458,9 +458,7 @@ function updateTask(): AnyAction {
 function updateTaskSuccess(task: any): AnyAction {
     const action = {
         type: TasksActionTypes.UPDATE_TASK_SUCCESS,
-        payload: {
-            task,
-        },
+        payload: { task },
     };
 
     return action;
@@ -469,23 +467,28 @@ function updateTaskSuccess(task: any): AnyAction {
 function updateTaskFailed(error: any, task: any): AnyAction {
     const action = {
         type: TasksActionTypes.UPDATE_TASK_FAILED,
-        payload: {
-            error,
-            task,
-        },
+        payload: { error, task },
     };
 
     return action;
 }
 
 export function updateTaskAsync(taskInstance: any):
-ThunkAction<Promise<void>, {}, {}, AnyAction> {
-    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+ThunkAction<Promise<void>, CombinedState, {}, AnyAction> {
+    return async (
+        dispatch: ActionCreator<Dispatch>,
+        getState: () => CombinedState,
+    ): Promise<void> => {
         try {
             dispatch(updateTask());
+            const currentUser = getState().auth.user;
             await taskInstance.save();
-            const [task] = await cvat.tasks.get({ id: taskInstance.id });
-            dispatch(updateTaskSuccess(task));
+            const nextUser = getState().auth.user;
+            const userFetching = getState().auth.fetching;
+            if (!userFetching && nextUser && currentUser.username === nextUser.username) {
+                const [task] = await cvat.tasks.get({ id: taskInstance.id });
+                dispatch(updateTaskSuccess(task));
+            }
         } catch (error) {
             // try abort all changes
             let task = null;

cvat-ui/src/components/labels-editor/constructor-updater.tsx

@@ -13,10 +13,7 @@ interface Props {
 }
 
 export default function ConstructorUpdater(props: Props): JSX.Element {
-    const {
-        label,
-        onUpdate,
-    } = props;
+    const { label, onUpdate } = props;
 
     return (
         <div className='cvat-label-constructor-updater'>

cvat-ui/src/components/labels-editor/label-form.tsx

@@ -49,14 +49,9 @@ class LabelForm extends React.PureComponent<Props, {}> {
     }
 
     private handleSubmit = (e: React.FormEvent): void => {
-        e.preventDefault();
-
-        const {
-            form,
-            label,
-            onSubmit,
-        } = this.props;
+        const { form, label, onSubmit } = this.props;
 
+        e.preventDefault();
         form.validateFields((error, formValues): void => {
             if (!error) {
                 onSubmit({
@@ -344,11 +339,7 @@ class LabelForm extends React.PureComponent<Props, {}> {
     }
 
     private renderAttribute = (key: number, index: number): JSX.Element => {
-        const {
-            label,
-            form,
-        } = this.props;
-
+        const { label, form } = this.props;
         const attr = (label && index < label.attributes.length
             ? label.attributes[index]
             : null);
@@ -387,11 +378,7 @@ class LabelForm extends React.PureComponent<Props, {}> {
     };
 
     private renderLabelNameInput(): JSX.Element {
-        const {
-            label,
-            form,
-            labelNames,
-        } = this.props;
+        const { label, form, labelNames } = this.props;
         const value = label ? label.name : '';
         const locked = label ? label.id >= 0 : false;
 
@@ -532,10 +519,7 @@ class LabelForm extends React.PureComponent<Props, {}> {
     }
 
     public render(): JSX.Element {
-        const {
-            label,
-            form,
-        } = this.props;
+        const { label, form } = this.props;
 
         form.getFieldDecorator('keys', {
             initialValue: label

cvat-ui/src/components/labels-editor/labels-editor.tsx

@@ -102,24 +102,15 @@ export default class LabelsEditor
             }
         }
 
-        this.setState({
-            unsavedLabels,
-            savedLabels,
-        });
-
+        this.setState({ unsavedLabels, savedLabels });
         this.handleSubmit(savedLabels, unsavedLabels);
     };
 
     private handleCreate = (label: Label | null): void => {
         if (label === null) {
-            this.setState({
-                constructorMode: ConstructorMode.SHOW,
-            });
+            this.setState({ constructorMode: ConstructorMode.SHOW });
         } else {
-            const {
-                unsavedLabels,
-                savedLabels,
-            } = this.state;
+            const { unsavedLabels, savedLabels } = this.state;
             const newUnsavedLabels = [
                 ...unsavedLabels,
                 {
@@ -128,19 +119,13 @@ export default class LabelsEditor
                 },
             ];
 
-            this.setState({
-                unsavedLabels: newUnsavedLabels,
-            });
-
+            this.setState({ unsavedLabels: newUnsavedLabels });
             this.handleSubmit(savedLabels, newUnsavedLabels);
         }
     };
 
     private handleUpdate = (label: Label | null): void => {
-        const {
-            savedLabels,
-            unsavedLabels,
-        } = this.state;
+        const { savedLabels, unsavedLabels } = this.state;
 
         if (label) {
             const filteredSavedLabels = savedLabels
@@ -163,9 +148,7 @@ export default class LabelsEditor
 
             this.handleSubmit(filteredSavedLabels, filteredUnsavedLabels);
         } else {
-            this.setState({
-                constructorMode: ConstructorMode.SHOW,
-            });
+            this.setState({ constructorMode: ConstructorMode.SHOW });
         }
     };
 
@@ -178,19 +161,13 @@ export default class LabelsEditor
             });
         }
 
-        const {
-            unsavedLabels,
-            savedLabels,
-        } = this.state;
+        const { unsavedLabels, savedLabels } = this.state;
 
         const filteredUnsavedLabels = unsavedLabels.filter(
             (_label: Label): boolean => _label.id !== label.id,
         );
 
-        this.setState({
-            unsavedLabels: filteredUnsavedLabels,
-        });
-
+        this.setState({ unsavedLabels: filteredUnsavedLabels });
         this.handleSubmit(savedLabels, filteredUnsavedLabels);
     };
 
@@ -214,10 +191,8 @@ export default class LabelsEditor
         }
 
         const { onSubmit } = this.props;
-        const output = [];
-        for (const label of savedLabels.concat(unsavedLabels)) {
-            output.push(transformLabel(label));
-        }
+        const output = savedLabels.concat(unsavedLabels)
+            .map((label: Label): any => transformLabel(label));
 
         onSubmit(output);
     }

cvat-ui/src/components/labels-editor/raw-viewer.tsx

@@ -48,10 +48,7 @@ class RawViewer extends React.PureComponent<Props> {
     };
 
     private handleSubmit = (e: React.FormEvent): void => {
-        const {
-            form,
-            onSubmit,
-        } = this.props;
+        const { form, onSubmit } = this.props;
 
         e.preventDefault();
         form.validateFields((error, values): void => {

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

@@ -19,6 +19,7 @@ import TopBarComponent from './top-bar';
 interface TaskPageComponentProps {
     task: Task | null | undefined;
     fetching: boolean;
+    updating: boolean;
     deleteActivity: boolean | null;
     installedGit: boolean;
     getTask: () => void;
@@ -28,10 +29,7 @@ type Props = TaskPageComponentProps & RouteComponentProps<{id: string}>;
 
 class TaskPageComponent extends React.PureComponent<Props> {
     public componentDidUpdate(): void {
-        const {
-            deleteActivity,
-            history,
-        } = this.props;
+        const { deleteActivity, history } = this.props;
 
         if (deleteActivity) {
             history.replace('/tasks');
@@ -42,11 +40,12 @@ class TaskPageComponent extends React.PureComponent<Props> {
         const {
             task,
             fetching,
+            updating,
             getTask,
         } = this.props;
 
-        if (task === null) {
-            if (!fetching) {
+        if (task === null || updating) {
+            if (task === null && !fetching) {
                 getTask();
             }
 

cvat-ui/src/containers/task-page/details.tsx

@@ -38,7 +38,9 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
 
 function mapDispatchToProps(dispatch: any, own: OwnProps): DispatchToProps {
     return {
-        onTaskUpdate: (taskInstance: any): void => dispatch(updateTaskAsync(taskInstance)),
+        onTaskUpdate(taskInstance: any): void {
+            dispatch(updateTaskAsync(taskInstance));
+        },
         cancelAutoAnnotation(): void {
             dispatch(cancelInferenceAsync(own.task.instance.id));
         },

cvat-ui/src/containers/task-page/task-page.tsx

@@ -19,6 +19,7 @@ type Props = RouteComponentProps<{id: string}>;
 interface StateToProps {
     task: Task | null | undefined;
     fetching: boolean;
+    updating: boolean;
     deleteActivity: boolean | null;
     installedGit: boolean;
 }
@@ -30,7 +31,7 @@ interface DispatchToProps {
 function mapStateToProps(state: CombinedState, own: Props): StateToProps {
     const { list } = state.plugins;
     const { tasks } = state;
-    const { gettingQuery } = tasks;
+    const { gettingQuery, fetching, updating } = tasks;
     const { deletes } = tasks.activities;
 
     const id = +own.match.params.id;
@@ -49,7 +50,8 @@ function mapStateToProps(state: CombinedState, own: Props): StateToProps {
     return {
         task,
         deleteActivity,
-        fetching: state.tasks.fetching,
+        fetching,
+        updating,
         installedGit: list.GIT_INTEGRATION,
     };
 }

cvat-ui/src/reducers/interfaces.ts

@@ -41,6 +41,7 @@ export interface Task {
 export interface TasksState {
     initialized: boolean;
     fetching: boolean;
+    updating: boolean;
     hideEmpty: boolean;
     gettingQuery: TasksQuery;
     count: number;

cvat-ui/src/reducers/tasks-reducer.ts

@@ -12,6 +12,7 @@ import { TasksState, Task } from './interfaces';
 const defaultState: TasksState = {
     initialized: false,
     fetching: false,
+    updating: false,
     hideEmpty: false,
     count: 0,
     current: [],
@@ -290,11 +291,13 @@ export default (state: TasksState = defaultState, action: AnyAction): TasksState
         case TasksActionTypes.UPDATE_TASK: {
             return {
                 ...state,
+                updating: true,
             };
         }
         case TasksActionTypes.UPDATE_TASK_SUCCESS: {
             return {
                 ...state,
+                updating: false,
                 current: state.current.map((task): Task => {
                     if (task.instance.id === action.payload.task.id) {
                         return {
@@ -310,6 +313,7 @@ export default (state: TasksState = defaultState, action: AnyAction): TasksState
         case TasksActionTypes.UPDATE_TASK_FAILED: {
             return {
                 ...state,
+                updating: false,
                 current: state.current.map((task): Task => {
                     if (task.instance.id === action.payload.task.id) {
                         return {