Minor fixes in labels editor

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

@@ -50,22 +50,24 @@ export default class LabelForm extends React.Component<Props> {
         const { label, onSubmit } = this.props;
 
         onSubmit({
-            name: values.labelName,
+            name: values.name,
             id: label ? label.id : idGenerator(),
-            color: values.labelColor,
+            color: values.color,
             attributes: values.attributes.map((attribute: Store) => {
-                let attrValues: any = attribute.values;
+                let attrValues: string | string[] = attribute.values;
-                if (attribute.input_type === AttributeType.NUMBER) {
+                if (!Array.isArray(attrValues)) {
+                    if (attribute.type === AttributeType.NUMBER) {
                         attrValues = attrValues.split(';');
                     } else {
                         attrValues = [attrValues];
                     }
+                }
                 attrValues = attrValues.map((value: string) => value.trim());
 
                 return {
                     ...attribute,
                     values: attrValues,
-                    input_type: attribute.type,
+                    input_type: attribute.type.toLowerCase(),
                 };
             }),
         });
@@ -366,7 +368,7 @@ export default class LabelForm extends React.Component<Props> {
         return (
             <Form.Item
                 hasFeedback
-                name='labelName'
+                name='name'
                 initialValue={value}
                 rules={[
                     {
@@ -462,19 +464,23 @@ export default class LabelForm extends React.Component<Props> {
         const { label } = this.props;
 
         return (
-            <Form.Item name='labelColor' initialValue={label && label.color ? label.color : undefined}>
+            <Form.Item noStyle shouldUpdate>
+                {() => (
+                    <Form.Item name='color' initialValue={label ? label?.color : undefined}>
                         <ColorPicker placement='bottom'>
                             <Tooltip title='Change color of the label'>
                                 <Button type='default' className='cvat-change-task-label-color-button'>
                                     <Badge
                                         className='cvat-change-task-label-color-badge'
-                                color={this.formRef.current?.getFieldValue('labelColor') || consts.NEW_LABEL_COLOR}
+                                        color={this.formRef.current?.getFieldValue('color') || consts.NEW_LABEL_COLOR}
                                         text={<Icon component={ColorizeIcon} />}
                                     />
                                 </Button>
                             </Tooltip>
                         </ColorPicker>
                     </Form.Item>
+                )}
+            </Form.Item>
         );
     }
 
@@ -486,16 +492,20 @@ export default class LabelForm extends React.Component<Props> {
     public componentDidMount(): void {
         const { label } = this.props;
         if (this.formRef.current) {
-            this.formRef.current.setFieldsValue({
+            const convertedAttributes = label ?
-                attributes: label ?
                 label.attributes.map(
                     (attribute: Attribute): Store => ({
                         ...attribute,
-                            type: attribute.input_type,
+                        type: attribute.input_type.toUpperCase(),
                     }),
                 ) :
-                    [],
+                [];
-            });
+
+            for (const attr of convertedAttributes) {
+                delete attr.input_type;
+            }
+
+            this.formRef.current.setFieldsValue({ attributes: convertedAttributes });
         }
     }
 
@@ -504,10 +514,12 @@ export default class LabelForm extends React.Component<Props> {
             <Form onFinish={this.handleSubmit} layout='vertical' ref={this.formRef}>
                 <Row justify='start' align='middle'>
                     <Col span={10}>{this.renderLabelNameInput()}</Col>
-                    <Col span={1} />
+                    <Col span={3} offset={1}>
-                    <Col span={3}>{this.renderChangeColorButton()}</Col>
+                        {this.renderChangeColorButton()}
-                    <Col span={1} />
+                    </Col>
-                    <Col span={6}>{this.renderNewAttributeButton()}</Col>
+                    <Col span={6} offset={1}>
+                        {this.renderNewAttributeButton()}
+                    </Col>
                 </Row>
                 <Row justify='start' align='middle'>
                     <Col span={24}>