Fixed: Cannot update attributes if a task contain at least one number attribute (#2969)

* Resolved issue #2968

* updated changelog & version

* Updated alignment

CHANGELOG.md

@@ -67,6 +67,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed project search field updating (<https://github.com/openvinotoolkit/cvat/pull/2901>)
 - Fixed export error when invalid polygons are present in overlapping frames (<https://github.com/openvinotoolkit/cvat/pull/2852>)
 - Fixed image quality option for tasks created from images (<https://github.com/openvinotoolkit/cvat/pull/2963>)
+- Updating label attributes when label contains number attributes (<https://github.com/openvinotoolkit/cvat/pull/2969>)
 
 ### Security
 

cvat-ui/package-lock.json

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

cvat-ui/package.json

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

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

@@ -161,20 +161,20 @@ export default class LabelForm extends React.Component<Props> {
         const locked = attr ? attr.id >= 0 : false;
         const existedValues = attr ? attr.values : [];
 
-        const validator = (_: any, values: string[], callback: any): void => {
+        const validator = (_: any, values: string[]): Promise<void> => {
             if (locked && existedValues) {
                 if (!equalArrayHead(existedValues, values)) {
-                    callback('You can only append new values');
+                    return Promise.reject(new Error('You can only append new values'));
                 }
             }
 
             for (const value of values) {
                 if (!patterns.validateAttributeValue.pattern.test(value)) {
-                    callback(`Invalid attribute value: "${value}"`);
+                    return Promise.reject(new Error(`Invalid attribute value: "${value}"`));
                 }
             }
 
-            callback();
+            return Promise.resolve();
         };
 
         return (
@@ -223,35 +223,35 @@ export default class LabelForm extends React.Component<Props> {
     private renderNumberRangeInput(fieldInstance: any, attr: Attribute | null): JSX.Element {
         const { key } = fieldInstance;
         const locked = attr ? attr.id >= 0 : false;
-        const value = attr ? attr.values.join(';') : '';
+        const value = attr ? attr.values : '';
 
-        const validator = (_: any, strNumbers: string, callback: any): void => {
+        const validator = (_: any, strNumbers: string): Promise<void> => {
             const numbers = strNumbers.split(';').map((number): number => Number.parseFloat(number));
             if (numbers.length !== 3) {
-                callback('Three numbers are expected');
+                return Promise.reject(new Error('Three numbers are expected'));
             }
 
             for (const number of numbers) {
                 if (Number.isNaN(number)) {
-                    callback(`"${number}" is not a number`);
+                    return Promise.reject(new Error(`"${number}" is not a number`));
                 }
             }
 
             const [min, max, step] = numbers;
 
             if (min >= max) {
-                callback('Minimum must be less than maximum');
+                return Promise.reject(new Error('Minimum must be less than maximum'));
             }
 
             if (max - min < step) {
-                callback('Step must be less than minmax difference');
+                return Promise.reject(new Error('Step must be less than minmax difference'));
             }
 
             if (step <= 0) {
-                callback('Step must be a positive number');
+                return Promise.reject(new Error('Step must be a positive number'));
             }
 
-            callback();
+            return Promise.resolve();
         };
 
         return (
@@ -339,7 +339,7 @@ export default class LabelForm extends React.Component<Props> {
                 {() => (
                     <Row
                         justify='space-between'
-                        align='middle'
+                        align='top'
                         cvat-attribute-id={fieldValue.id}
                         className='cvat-attribute-inputs-wrapper'
                     >
@@ -507,6 +507,10 @@ export default class LabelForm extends React.Component<Props> {
                 label.attributes.map(
                     (attribute: Attribute): Store => ({
                         ...attribute,
+                        values:
+                              attribute.input_type.toUpperCase() === 'NUMBER' ?
+                                  attribute.values.join(';') :
+                                  attribute.values,
                         type: attribute.input_type.toUpperCase(),
                     }),
                 ) :