Merge pull request #4477 from suomiy/kubevirt.bug.1807142

Bug 1807142: fix CPU and RAM editing in Flavor dialog

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/tabs/vm-settings-tab/memory-cpu.tsx

@@ -17,7 +17,7 @@ export const MemoryCPU: React.FC<MemoryCPUProps> = React.memo(
       <FormFieldMemoRow field={memoryField} fieldType={FormFieldType.TEXT}>
         <FormField>
           <Integer
-            className="kubevirt-create-vm-modal__memory-input"
+            isFullWidth
             isPositive
             onChange={(value) => onChange(VMSettingsField.MEMORY, value)}
           />
@@ -29,7 +29,7 @@ export const MemoryCPU: React.FC<MemoryCPUProps> = React.memo(
       <FormFieldMemoRow field={cpuField} fieldType={FormFieldType.TEXT}>
         <FormField>
           <Integer
-            className="kubevirt-create-vm-modal__cpu-input"
+            isFullWidth
             isPositive
             onChange={(value) => onChange(VMSettingsField.CPU, value)}
           />

frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/tabs/vm-settings-tab/vm-settings-tab.scss

@@ -7,14 +7,6 @@
   margin-right: 0.5em;
 }
 
-.kubevirt-create-vm-modal__memory-input {
-  max-width:  100% !important;
-}
-
-.kubevirt-create-vm-modal__cpu-input {
-  max-width:  100% !important;
-}
-
 .kubevirt-create-vm-modal__start_vm_checkbox > input[type="checkbox"] {
   margin: -0.1em 0 0 !important;
 }

frontend/packages/kubevirt-plugin/src/components/form/integer/integer.scss

@@ -0,0 +1,3 @@
+.kubevirt-integer-component {
+  max-width: 100% !important;
+}

frontend/packages/kubevirt-plugin/src/components/form/integer/integer.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
+import * as classNames from 'classnames';
 import { TextInput } from '@patternfly/react-core';
 import { getSequence, setNativeValue } from '../../../utils/utils';
 import { isMinus, KEY_CODES, INPUT_NAVIGATION_KEYS } from '../../../constants/keys';
 
+import './integer.scss';
+
 const NON_NEGATIVE_INTEGER_KEYS = [
   ...INPUT_NAVIGATION_KEYS,
   ...getSequence(KEY_CODES[0], KEY_CODES[9]),
@@ -68,6 +71,9 @@ export const Integer: React.FC<IntegerProps> = ({
   isPositive,
   isNonNegative,
   className,
+  isFullWidth,
+  isValid,
+  ...restProps
 }) => {
   let allowedKeys;
   let validRegex;
@@ -120,6 +126,7 @@ export const Integer: React.FC<IntegerProps> = ({
 
   return (
     <TextInput
+      {...restProps}
       id={id}
       type="number"
       onKeyDown={onKeydown}
@@ -130,14 +137,17 @@ export const Integer: React.FC<IntegerProps> = ({
         typeof onBlur === 'function' ? (event) => onBlur(event.target.value || '', event) : null
       }
       onChange={onChange}
-      className={className}
+      className={classNames(className, {
+        'kubevirt-integer-component': isFullWidth,
+      })}
       isDisabled={isDisabled}
     />
   );
 };
 
 type IntegerProps = {
   id?: string;
+  isFullWidth?: boolean;
   className?: string;
   value?: string;
   defaultValue?: string;
@@ -146,4 +156,6 @@ type IntegerProps = {
   isPositive?: boolean;
   isNonNegative?: boolean; // is ignored when positive == true
   isDisabled?: boolean;
+  isValid?: boolean;
+  'aria-label'?: string;
 };

frontend/packages/kubevirt-plugin/src/components/form/size-unit-form-row.scss

@@ -1,7 +1,3 @@
-.kubevirt-size-unit-form-row__size {
-  max-width: 100% !important;
-}
-
 .kubevirt-size-unit-form-row__unit {
   width: 6em;
 }

frontend/packages/kubevirt-plugin/src/components/form/size-unit-form-row.tsx

@@ -3,6 +3,7 @@ import { FormSelect, FormSelectOption, Split, SplitItem } from '@patternfly/reac
 import { ValidationObject } from '@console/shared';
 import { prefixedID } from '../../utils';
 import { getStringEnumValues } from '../../utils/types';
+import { isValidationError } from '../../utils/validations/common';
 import { FormRow } from './form-row';
 import { Integer } from './integer/integer';
 import { BinaryUnit, toIECUnit } from './size-unit-utils';
@@ -43,12 +44,14 @@ export const SizeUnitFormRow: React.FC<SizeUnitFormRowProps> = ({
     <Split>
       <SplitItem isFilled>
         <Integer
-          className="kubevirt-size-unit-form-row__size"
+          isFullWidth
+          isValid={!isValidationError(validation)}
           isDisabled={isDisabled}
           id={prefixedID(id, 'size')}
           value={size}
           isPositive
           onChange={React.useCallback((v) => onSizeChanged(v), [onSizeChanged])}
+          aria-label={`${title} size`}
         />
       </SplitItem>
       <SplitItem>
@@ -58,6 +61,7 @@ export const SizeUnitFormRow: React.FC<SizeUnitFormRowProps> = ({
           value={unit}
           id={prefixedID(id, 'unit')}
           isDisabled={isDisabled}
+          aria-label={`${title} unit`}
         >
           {(units || getStringEnumValues<BinaryUnit>(BinaryUnit)).map((u) => (
             <FormSelectOption key={u} value={u} label={toIECUnit(u)} />